老生常谈之弹窗出现，浏览器出现抖动问题

抖动现象的产生

我们经常在浏览器中，遇到这样的一个问题，就是当我们点击一个按钮，出现一个dialog或者popup弹窗时， 我们能明显看到浏览器出现了抖动。这个是因为弹窗出现的时候，浏览器的右侧的浏览器的滚动条消失了， 造成了浏览器视窗内容的宽度出现变化，从而出现了抖动。

这个现象，引发了我们如下的疑问：

• 弹窗的出现，为什么导致浏览器宽度变化？
• 浏览器的滚动条的宽度是多少？
• 如何解决这个宽度变化，导致的抖动呢？

那我们分别从这三个疑问入手，来解决这个抖动问题。

弹窗出现，为什么导致浏览器的宽度变化

我们以element官网的Messagebox组件为示例，来演示这个问题

这个是因为我们弹窗的定位是position: fixed, 会脱离正常的文档流的，是相对于浏览器的视窗进行定位， 而浏览器的视窗是不包含浏览器的滚动条的。所以当弹窗出现的时候，浏览器的滚动条会消失。

浏览器的滚动条的宽度是多少

那浏览器的滚动条的宽度是多少呢？每个浏览器都是一样的嘛？其实我们观察一下不同的浏览器，我们可以得出 每个浏览器的滚动条的宽度和样式，都是不一样的。那么怎么计算浏览器滚动条的宽度呢？

我们还是以element为例，我们看看他是怎么计算的，查看element的源码的时候， 我们发现了这么一段代码，这个就是来计算浏览器的宽度。我们来具体看看它是怎么计算的。

其计算浏览器的解析如下：

• outer, inner元素的宽度，我们可以通过offsetWidth获取。
• 两者相减，自然就得到了滚动条的宽度了。
• 然后再将新增的outer元素移除即可。

如何解决这个宽度变化，导致的抖动呢

既然我们都知道，这个问题产生的原因以及滚动条的宽度的计算了，那么我们怎么解决这个抖动问题呢？

1. 我们从结果来倒推，如果要弹窗出现的时候，页面不出现抖动，那么览器视窗内容宽度就不要出现变化。
2. 而浏览器视窗内容宽度怎么才能维持宽度不变呢，已知弹窗出现的时候，浏览器的滚动条就会消失，浏览器视窗内容宽度会增加。
3. 如果要维持浏览器视窗内容宽度不变，那么弹窗出现的时候，我们浏览器视窗内容宽度保持与滚动条消失之前一样
4. 那么此时浏览器视窗内容的宽度应该为：浏览器视窗宽度 - 滚动条的宽度

element UI是如何解决抖动呢？

其实看看element UI官网，你会发现它并不是这种按照这种方式解决的，但是弹窗出现的时候，真的无丝毫抖动 稳定的非常丝滑，那他们是怎么做到的呢？具体的分析，可点击这篇文章

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