阻止因出现滚动条导致页面抖动
来源:互联网 发布:计算机数据结构和算法 编辑:程序博客网 时间:2024/06/14 12:57
现在大多数页面都是采用主体内容水平居中布局
<body> <div></div></body>
div{ width:1200px; margin:0 auto;}
但是,这种布局存在一个问题。现在的浏览器滚动条默认是overflow:auto
类型的,也就是说如果内容高度不足一屏,没有滚动条;如果超出才会出现滚动条。于是,问题来了:
- 信息流页面,如新浪微博,是从上往下push渲染的。开始只有头部一些信息加载,此时页面高度有限,没有滚动条;然后,更多内容显示,滚动条出现,占据可用宽度,
margin: 0 auto
主体元素自然会做偏移——跳动产生。 - JS交互,本来默认页面高度不足一屏,结果点击了个“加载更多”,内容超过一屏,滚动条出现,页面主体就会左侧跳动。
- 结构类似几个页面通过头部的水平导航刷新切换,结果有的页面有滚动条,有的没有。造成的结果就是,导航怎么跳来跳去!
现在有以下三种方法解决这一问题:
1、让浏览器的垂直滚动条一直显示body { overflow-y: scroll; }当然这种方法就会造成即使内容高度不足一屏,浏览器右侧也会显示一条灰色的滚动条,影响用户体验。
2、当内容高度超过一屏时,在浏览器左侧同时加上一个滚动条宽的的padding或margin。
.wrap-outer { margin-left: calc(100vw - 100%);}或
.wrap-outer { padding-left: calc(100vw - 100%);}
注 : 1、
.wrap-outer
指的是居中定宽主体的父级。2、
calc
是CSS3中的计算,IE10+浏览器支持,IE9浏览器基本支持(不能用在background-position
上);3、
100vw
相对于浏览器的window.innerWidth
,是浏览器的内部宽度,注意,滚动条宽度也计算在内!而100%
是可用宽度,是不含滚动条的宽度。于是,
calc(100vw - 100%)
就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0
)!左右都有一个滚动条宽度(或都是0
)被占用,主体内容就可以永远居中浏览器啦,从而没有任何跳动!3、兼容写法
html { overflow-x: hidden; overflow-y: scroll;}:root { overflow-y: auto; overflow-x: hidden;}:root body { position: absolute;}body { width: 100vw; overflow: hidden;}
阅读全文
1 0
- 阻止因出现滚动条导致页面抖动
- 因滚动条出现而导致页面晃动的解决方案
- 解决滚动条出现,页面抖动问题
- 页面出现滚动条时会出现抖动现象
- 关于WebView因图片太大导致出现横向滚动条问题
- firefox下滚动条消失引起页面抖动的问题
- 页面不出现滚动条,局部有滚动条
- JS判断页面是否出现滚动条
- JS判断页面是否出现滚动条
- JS判断页面是否出现滚动条
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
- 解决Bootstrap模态框切换时页面抖动 or页面滚动条
- 阻止在div上滚动滚动条,到底部和顶部带动整个页面的滚动条
- 【解决】页面过长导致FlexPaper滚动条无法控制
- bootstrap打开模态滚动条modal窗口引起页面抖动解决办法
- 阻止pgup使滚动条滚动
- 阻止退格键导致页面跳转
- 让页面出现滚动条的时候,滚动条不影响页面宽度
- 上升沿
- ViewPager引导页
- 3.3.7 杰克·特劳特——营销定位
- 3.3.8 时间管理
- 文件不同编码对linux sort命令的影响
- 阻止因出现滚动条导致页面抖动
- 3.3.9 艾利·高德拉特——TOC制…
- LINUX上部署FastDFS文件服务器
- 3.3.10 质量管理——戴明,朱兰…
- 3.3.16 情报与决策
- 3.3.11 阿尔文·托夫勒——未来…
- bootstrap-table固定表头,同时适配高度,兼容ie,checkbox,固定列解决方案(续)
- 3.3.12 价格,成本和利润
- 3.3.15 十七种企业战略