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

大花也是花2024-03-27 16:41

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

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

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

element UI是如何解决抖动呢？

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

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

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

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

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

计算自定义浏览器滚动条的高度

js 复制代码

// 来自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 + '%') : '';

需要监听内容容器的滚动事件，通过滚动事件，来实时更改滚动条的滚动位置

js 复制代码

// 来自element UI 源码
const wrap = this.wrap;
// 根据滚动距离/可视内容高度进行 
// 注意：X100是为了计算百分比
this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);

总结

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

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