逐步解决动态添加样式导致的元素闪烁 阿星小栈

2024-05-09 20:38

本文主要是介绍逐步解决动态添加样式导致的元素闪烁 阿星小栈,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 

元素闪烁很丑,难解决。

修改 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; //该元素距离网页顶端60pxwindow.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

这篇关于逐步解决动态添加样式导致的元素闪烁 阿星小栈的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/974444

相关文章

第10章 中断和动态时钟显示

第10章 中断和动态时钟显示 从本章开始,按照书籍的划分,第10章开始就进入保护模式(Protected Mode)部分了,感觉从这里开始难度突然就增加了。 书中介绍了为什么有中断(Interrupt)的设计,中断的几种方式:外部硬件中断、内部中断和软中断。通过中断做了一个会走的时钟和屏幕上输入字符的程序。 我自己理解中断的一些作用: 为了更好的利用处理器的性能。协同快速和慢速设备一起工作

动态规划---打家劫舍

题目: 你是一个专业的小偷,计划偷窃沿街的房屋。每间房内都藏有一定的现金,影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统,如果两间相邻的房屋在同一晚上被小偷闯入,系统会自动报警。 给定一个代表每个房屋存放金额的非负整数数组,计算你 不触动警报装置的情况下 ,一夜之内能够偷窃到的最高金额。 思路: 动态规划五部曲: 1.确定dp数组及含义 dp数组是一维数组,dp[i]代表

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

如何解决线上平台抽佣高 线下门店客流少的痛点!

目前,许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流,但其费用昂贵。鉴于此,众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台,但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境下,商家之间的合作网络逐渐成为一种有效的解决方案,通过资源和客户基础的共享,实现共同的利益增长。 以最近在上海兴起的一个跨行业合作平台为例,该平台融合了环保消费积分系统,在短

代码随想录冲冲冲 Day39 动态规划Part7

198. 打家劫舍 dp数组的意义是在第i位的时候偷的最大钱数是多少 如果nums的size为0 总价值当然就是0 如果nums的size为1 总价值是nums[0] 遍历顺序就是从小到大遍历 之后是递推公式 对于dp[i]的最大价值来说有两种可能 1.偷第i个 那么最大价值就是dp[i-2]+nums[i] 2.不偷第i个 那么价值就是dp[i-1] 之后取这两个的最大值就是d

pip-tools:打造可重复、可控的 Python 开发环境,解决依赖关系,让代码更稳定

在 Python 开发中,管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等,都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools? pip-tools 是一组命令行工具,旨在简化 Python 依赖关系的管理,确保项目环境的稳定性和可重复性。它主要包含两个核心工具:pip-compile 和 pip

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

速盾高防cdn是怎么解决网站攻击的?

速盾高防CDN是一种基于云计算技术的网络安全解决方案,可以有效地保护网站免受各种网络攻击的威胁。它通过在全球多个节点部署服务器,将网站内容缓存到这些服务器上,并通过智能路由技术将用户的请求引导到最近的服务器上,以提供更快的访问速度和更好的网络性能。 速盾高防CDN主要采用以下几种方式来解决网站攻击: 分布式拒绝服务攻击(DDoS)防护:DDoS攻击是一种常见的网络攻击手段,攻击者通过向目标网

遮罩,在指定元素上进行遮罩

废话不多说,直接上代码: ps:依赖 jquer.js 1.首先,定义一个 Overlay.js  代码如下: /*遮罩 Overlay js 对象*/function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩状态 true 激活,f

Jenkins 插件 地址证书报错问题解决思路

问题提示摘要: SunCertPathBuilderException: unable to find valid certification path to requested target...... 网上很多的解决方式是更新站点的地址,我这里修改了一个日本的地址(清华镜像也好),其实发现是解决不了上述的报错问题的,其实,最终拉去插件的时候,会提示证书的问题,几经周折找到了其中一遍博文