解决前端页面闪烁问题（转载） -凯发k8官方网

修改 class 而不是 style

我在不久前做过一个导航栏，要求其滚动到屏幕顶端后固定。很常见。开始的时候没问题，很快就可以搞定。

nav {position: absolute;top: 60px; } var scroll=0; var nav=$("nav"); var navst=60; //该元素距离网页顶端60px $(window).scroll(function(){ if($(document).scrolltop()>navst && scroll==0){ nav.css({position: "fixed",top: "0"}); scroll=1; } else if($(document).scrolltop()<=navst && scroll==1){ nav.removeattr("style"); scroll=0; } });

运行很流畅。

做好，我自然就忙着网页内容去了。没曾想，随着页面 js 的不断增加，导航栏在固定时出现了可怕的闪动。

唔，就是 一下看得见 一下看不见 的东西！

应该有不少人和我一样。百度，无果。谷歌，看不懂，翻译也不行。
不知道真相的我，眼泪 流下来。

哦！一道莫名的亮光从我的眼前闪过！这道亮光里，有希望，，有兴奋，，组成了四个大字：

元素重绘

就在这千万分之一秒，亿万分之一秒 里，我理解了：

nav.css({position: "fixed",top: "0"});

这一句 js 产生了两次 dom 写入，影响浏览器渲染页面两次。

使用 $.addclass 语句可以解决。

nav {position: absolute;top: 60px; } .fixed { position: fixed; top: 0; } var scroll=0; var nav=$("nav"); var navst=60; //该元素距离网页顶端60px $(window).scroll(function(){ if($(document).scrolltop()>navst && scroll==0){ nav.addclass("fixed"); scroll=1; } else if($(document).scrolltop()<=navst && scroll==1){ nav.removeclass("fixed"); scroll=0; } });

闪烁问题得到了临时解决。

采用不可见元素减少 dom 变更产生的运算

“临时” 说法的原因是当 js 数量再次增加，达到又一新高度后，闪烁问题再现。
原因大概是 $.addclass 时浏览器需要重新计算该元素位置， js 数量过多使计算过程明显。
不多说，在 html 里多放一个包含 .fixed 的宽高为 0 的元素即可解决。

<div class="fixed">div> <nav>something...nav>

别让这个 div.fixed 显示出来。

至此，全面解决 “动态添加样式导致的元素闪烁” 。

原生 js 进一步加快速度避免闪烁

jquery 是个好东西。原生 js 更是个好东西。

有些 jquery 代码，被转化为好多条原生 js 才实现效果。
然而其实只需要一条。
将 jquery 代码转化为原生 js 是个加快速度，避免闪烁的不二选择。

var scroll=0; var navst=60; //该元素距离网页顶端60px window.onscroll = function(){ if(document.documentelement.scrolltop || document.body.scrolltop>navst && scroll==0){ document.getelementsbytagname("nav")[0].classlist.add("fixed"); scroll=1; } else if(document.documentelement.scrolltop || document.body.scrolltop<=navst && scroll==1){ document.getelementsbytagname("nav")[0].classlist.remove("fixed"); scroll=0; } };

谢谢阅读！

https://segmentfault.com/a/1190000006216880

转载于:https://www.cnblogs.com/hubgit/p/8057975.html

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是凯发k8官方网为你收集整理的解决前端页面闪烁问题（转载）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。