网页中设置width为100vw的加载条出现视口溢出是什么原因？

你遇到的溢出问题核心是100vw单位的计算逻辑包含了浏览器纵向滚动条的宽度：

• 100vw的定义是视口的完整宽度，无论右侧是否存在纵向滚动条，都会按照整个视口的总宽度计算
• 你的页面中header+main的总高度超过了普通设备的视口高度，页面会默认出现纵向滚动条，滚动条本身会占据一部分视口宽度，此时页面内容的实际可用宽度是小于100vw的，因此宽度设为100vw的加载条就会超出可用范围，导致横向溢出。

最稳妥、兼容性最好的解决方式是把加载条的宽度单位从vw换成百分比%：

1. 修改JS中的宽度赋值：将progress.style.width = "100vw"改为progress.style.width = "100%"
2. 可以同步把CSS里#progress的初始width从0vw改为0或者0%，保持单位统一即可。

原理：百分比宽度是基于父元素的可用内容宽度计算的，你的#progress是body的直接子元素，body作为块级元素默认宽度就是排除了纵向滚动条后的页面可用宽度，100%刚好能铺满，不会出现溢出。

其他可选方案（按需选择） #

• 如果你确定页面不会出现横向内容溢出，可以给html元素添加overflow-x: hidden样式，直接隐藏横向溢出部分，但这种方式没有从根源解决问题，不推荐作为首选
• 如果你希望纵向滚动条不占用页面宽度，可以给html元素添加overflow-y: overlay样式，让滚动条悬浮在页面内容上方，不会挤占宽度，此时100vw也能正常铺满，注意该属性在部分旧版浏览器上存在兼容性问题。

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