网页滚动条占用网页宽度导致网页抖动问题
网页 问题 占用 导致 滚动条 宽度 抖动
2023-06-13 09:18:40 时间
起因
最近使用bootstrap
构建布局时,我发现不同页面container
的x
轴起始位置有些许不同,大概有几像素的变动,后来经过一个小时的排查发现不是代码书写问题,而是页面的滚动条也占用网页宽度,所以有滚动条的页面和没有滚动条的页面body
的宽度是不一致的。
解决方法
本来没想去解决,我觉得只要网站内容填充起来就都有滚动条了,就没有去管!
直到刚刚准备写文章记录这个问题时突然来了个小灵感,一测试确实好用,只需要两条css
语句,如下:
body {
margin-right: calc(-1 * (100vw - 100%));
overflow-x: hidden;
}
100vw
是浏览器的宽度,100%
时页面的宽度,所以100vw - 100%
就是滚动条的宽度,没有滚动条的页面这样计算完是0,然后利用margin
可以为负值,让右边距为负值的滚动条宽度,这样有滚动条的页面就与没有滚动条的页面宽度一致了。
最后隐藏下x
轴的滚动条就完美了!兼容的话应该时IE9
起步!
linkCard('.post-content','0');
相关文章
- 微信网页分享(配合微信公众平台)[通俗易懂]
- 解决网页上不能直接复制文字的问题「建议收藏」
- 开发那些事儿:如何解决js打包文件体积过大导致的网页加载慢问题?
- 别再用 XShell 了!这款 SSH 工具绝对惊艳,还支持网页版
- 网页中图片去色问题是什么_网页问题
- 网站优化系列篇之01 — 网页字体可见性
- [网页提速]preload的使用方法
- 使用最简单的 CSS 代码来实现网页电影比例
- 【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 )
- jsp中网页点击量统计问题详解编程语言
- PHP 网页编码问题详解编程语言
- [解决Linux网页乱码问题](linux网页乱码)
- Linux下的网页设计软件:使用指南(linux网页设计软件)
- 用Linux轻松观看网页视频,尽享无限视频乐趣(Linux看网页视频)
- QQ网页版轻松实现Linux平台即时通讯(qq网页版linux)
- 才发现的超链接js导致网页中GIF动画停止的解决方法
- vbs或asp采集文章时网页编码问题
- DIV+CSS网页另类上下布局的实例代码
- asp+mysql+utf8网页出现乱码问题的解决方法
- Android中访问证书有问题的SSL网页的方法
- javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)