书接上回,回顾浏览器抖动问题
对于出现一个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 作者:大花也是花