书接上回，回顾浏览器抖动问题
对于出现一个dialog或者popup弹窗时， 我们能明显看到浏览器出现了抖动问题，详情的原因和分析过程
可以点击下面这篇文章，进行了解。
老生常谈之弹窗出现，浏览器出现抖动问题 – 掘金 (juejin.cn)
element UI是如何解决抖动呢？
通过对element UI官网的分析，我们发现，其实他是通过以下方式来做到完全无抖动。
- 将内容外层容器的高度固定，
overflow:hiddern隐藏掉滚动条，整个页面不出现滚动条 - 让内容区域一直处于
scroll状态，再通过设置负margin隐藏掉浏览器的自带滚动条 - 再通过自定义浏览器滚动条来模拟内容区域的滚动行为。
- 这样弹窗出现的时候，内容区域的滚动条一直都存在，那么就不存在由于浏览器滚动条的出现消失，导致内容区域宽度变化，从而就避免出现抖动问题
自定义浏览器滚动条如何模拟滚动行为
要模拟浏览器滚动条的行为，需要进行以下操作：
- 计算自定义浏览器滚动条的高度
// 来自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 作者：大花也是花
