跟Element UI官网学习,解决弹窗出现浏览器抖动问题

书接上回,回顾浏览器抖动问题

对于出现一个dialog或者popup弹窗时, 我们能明显看到浏览器出现了抖动问题,详情的原因和分析过程
可以点击下面这篇文章,进行了解。

老生常谈之弹窗出现,浏览器出现抖动问题 – 掘金 (juejin.cn)

element UI是如何解决抖动呢?

通过对element UI官网的分析,我们发现,其实他是通过以下方式来做到完全无抖动。

  • 将内容外层容器的高度固定,overflow:hiddern隐藏掉滚动条,整个页面不出现滚动条
  • 让内容区域一直处于scroll状态,再通过设置负margin隐藏掉浏览器的自带滚动条
  • 再通过自定义浏览器滚动条来模拟内容区域的滚动行为。

跟Element UI官网学习,解决弹窗出现浏览器抖动问题

跟Element UI官网学习,解决弹窗出现浏览器抖动问题

  • 这样弹窗出现的时候,内容区域的滚动条一直都存在,那么就不存在由于浏览器滚动条的出现消失,导致内容区域宽度变化,从而就避免出现抖动问题

自定义浏览器滚动条如何模拟滚动行为

要模拟浏览器滚动条的行为,需要进行以下操作:

  • 计算自定义浏览器滚动条的高度
// 来自element UI 源码
let heightPercentage, widthPercentage;
const wrap = this.wrap; // 代表内容滚动区域,即el-scrollbar__wrap元素
if (!wrap) return;

// 仅以右侧竖条滚动条为例:可视内容高度/内容本身高度
heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
// 等同于, 可视内容高度小于滚动高度,说明存在滚动条,反正不存在。
// 根据可视内容高度占整个滚动内容的高度,从而计算出滚动条的高度
heightPercentage = wrap.clientHeight / wrap.scrollHeight;
this.sizeHeight = heightPercentage < 1 ? (heightPercentage * 100 + '%') : '';

widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);

this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
  • 需要监听内容容器的滚动事件,通过滚动事件,来实时更改滚动条的滚动位置
// 来自element UI 源码
const wrap = this.wrap;
// 根据滚动距离/可视内容高度进行 
// 注意:X100是为了计算百分比
this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);

总结

以上就是常见的两种解决浏览器抖动问题的方式了。

上述只是自己浅浅理解,肯定存在些许错误,如有错误,恳请指正

原文链接:https://juejin.cn/post/7350717832450441227 作者:大花也是花

(0)
上一篇 2024年4月2日 下午4:39
下一篇 2024年4月2日 下午4:49

相关推荐

发表回复

登录后才能评论