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