为什么 100vw 会导致水平滚动条？

这篇文章来自我的个人博客，链接在此。

你有没有想过为什么网站有时会突然冒出一个水平滚动条？今天我又遇到了（一如既往😆），不过我设法找到了移除它的方法。以下是我调试和修复的步骤。

• 尝试使用全局边框或轮廓颜色技巧来找出导致问题的元素：

* {
  border: 1px solid red;
}

• 查找宽度大于文档宽度的元素（更多信息请访问csstrick）

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(document.querySelectorAll('*'), function (el) {
  if (el.offsetWidth > docWidth) {
    console.log(el);
  }
});

• 大多数情况下，我总能找到导致溢出的100vw值。所以，如果是这种情况，你可以尝试用其他值替换它，看看是否有效。如果存在内部元素，也请尝试替换它们。widthwidth: 100%

那么，回到标题，100vw原因是什么呢？答案是：

当你将元素的宽度设置为 时100vw，该元素的宽度将等于整个view width浏览器的宽度，关键在于它完全100vw不将元素的vertical scrollbar宽度width计算在内。因此，当存在元素时vertical scrollbar，元素的宽度将是元素宽度和元素宽度的total width总和，这会导致 x 轴溢出，从而导致宽度不足。element's widthvertical scrollbar's widthhorizontal scrollbar

希望这能帮到你！

如果您觉得有什么地方不对，请随时纠正我😃