使用100vw设置区块宽度后页面出现横向滚动条的原因是什么

核心触发原因 #

• 100vw单位的计算逻辑是包含纵向滚动条宽度的完整视口宽度，而页面内容区域的可用宽度是排除了纵向滚动条后的宽度，当页面存在纵向滚动条时，设置了width: 100vw的.site-section元素实际宽度会比内容区域可用宽度多出纵向滚动条的宽度（多数桌面浏览器为17px），超出的部分就会撑出横向滚动条。
• 未清除浏览器默认样式也会加剧问题：多数浏览器默认给html、body标签设置了默认的左右margin，叠加100vw的宽度后，元素总宽度会进一步超出视口。

兼容解决方案 #

不需要使用内核专属的滚动条隐藏方案，调整样式即可完美解决：

1. 先配置全局样式重置，统一盒模型规则、清除默认边距：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
}

2. 将.site-section中的width: 100vw替换为width: 100%即可，块级元素默认会撑满父级的可用宽度，不会包含滚动条宽度，全浏览器兼容。

内容的提问来源于stack exchange，提问作者xijdk