滚动条引起页面抖动问题
2018-02-28 00:00
1551 查看
项目过程中,很常见的 点击按钮 弹出遮罩和菜单,但同时可能会要求禁止滚动条滚动,这样可以
但是这样会因为滚动条的原因,使页面元素产生抖动(即页面元素产生位移)
想了很多办法,最终发现:
1.使用html的滚动条代替body的滚动条
2.有遮罩时,body 设置溢出隐藏,这样html的滚动条存在,但是由于没有溢出(溢出部分已经被body隐藏了),所以html的滚动条时无法滚动的(即遮罩下面的页面内容不会滚动)
代码:
/* 无遮罩时 */ body { overflow: auto; } /* 有遮罩时 */ body { overflow: hidden; }
但是这样会因为滚动条的原因,使页面元素产生抖动(即页面元素产生位移)
想了很多办法,最终发现:
1.使用html的滚动条代替body的滚动条
2.有遮罩时,body 设置溢出隐藏,这样html的滚动条存在,但是由于没有溢出(溢出部分已经被body隐藏了),所以html的滚动条时无法滚动的(即遮罩下面的页面内容不会滚动)
代码:
html { /* 滚动条一直存在,由溢出时可以滚动,无溢出时无法滚动,但是存在 */ overflow: scroll; } /* 有遮罩时 */ body { overflow: hidden; } /* 无遮罩时 */ body { overflow: auto; }
相关文章推荐
- firefox下滚动条消失引起页面抖动的问题
- firefox 滚动条消失引起页面抖动的问题
- firefox下有滚动条时页面抖动问题
- 解决上左右页面框架中iframe的引起的滚动条问题
- CSS 控制Html页面高度导致抖动问题的原因
- 解决项目中由于前端页面数据类型跟数据库类型不一致,导致获取数据为空引起问题
- 关于ie6下拖动滚动条时,div抖动的问题解决
- Bootstrap框架,在使用栅格布局的时候,在父标签中添加row类,发现引起网页出现横向滚动条的问题
- 解决Bootstrap的row类,引起网页横向滚动条的问题。
- IE6如何处理因页面大小改变而引起的报表问题 IE6兼容报表
- CSS 控制Html页面高度导致抖动问题的原因
- 移动端获取页面滚动条距离顶部的距离,以及拖动惯性问题
- bootstrap多个模态框嵌套显示,造成的遮罩颜色加深和页面滚动条问题
- 页面的渲染模式所引起的问题
- 解决页面刷新后滚动条回滚的问题。
- jquery easyui combobox加载数量过多引起渲染页面缓慢问题
- CSS 控制Html页面高度导致抖动问题的原因
- 没有滚动条,页面内容显示不全问题的解决方法
- 防止页面图片过大出现横滚动条问题