用overflow-y 解决web页面抖动问题

时间:2023-03-08 19:13:38
用overflow-y 解决web页面抖动问题

页面抖动(左右抖动)让人视觉上很不爽。。

/**

original : php攻城师

http://blog.csdn.net/phpgcs

**/

最开始我也以为是 layout 不一致的原因。。后来才发现是 因为垂直滚动条 时隐时现导致的

当页面内容在一页上没有展示完的时候, 浏览器右端会出现 垂直滚动条

反之, 这个 垂直滚动条默认是隐藏的

so, 当页面切换的时候,就会剧烈抖动起来。。。

解决方法:

添加 CSS :

body {
    overflow-y: scroll;

}

备注:

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。