解决网站页面抖动的小细节
最近在做项目的时候，客户提出在360和谷歌浏览器中，测试站的导航栏目切换时出现严重抖动的现象。针对这种现象，我去研究了其他网站以及我们已经上线的客户网站，发现普遍存在这个问题。
之前一直以为是js加载的问题，经过排查发现也不是这个原因，后来得到答案，下面跟大家分享一下，大家在做项目的时候也可以多注意下这个小问题：
解决方法：
添加 CSS： body { overflow-y: scroll; }
原因：是因为垂直滚动条时隐时现导致的。当页面内容在一页上没有展示完的时候， 浏览器右端会出现垂直滚动条。反之， 这个垂直滚动条默认是隐藏的，所以，当页面切换的时候，就会剧烈抖动起来。
这是一个容易被忽略的小问题，之前一直没有客户提到过这个问题，因为很多项目中我都发现存在这一小细节的问题，所以这次被客户发现也是给我们一个很好的警示，很多小细节问题需要我们去认真发现，并处理好，才能让客户觉得我们更专业。
解决后的效果：
最后，再回顾下overflow的相关属性：
值 描述
Visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
用户登录
还没有账号？
立即注册