为何CSS规则width:100vw会触发滚动条？

问题原因 #

当页面存在垂直滚动条时，100vw的计算包含了滚动条的宽度，而页面实际可用内容宽度是100vw减去滚动条宽度。你用width:100vw配合margin-left:-50vw的布局，会让容器轻微超出视口右侧，触发横向滚动条。

可行解决方案 #

方案1：全局隐藏横向溢出 #

直接给body添加样式，快速消除横向滚动：

body {
  overflow-x: hidden;
}

这种方式简单高效，适合不需要横向滚动的页面。

方案2：修改容器布局规则（不依赖vw） #

替换.shape-divider的定位和宽度设置，让容器自动占满视口，同时避开滚动条影响：

.shape-divider {
  line-height: 0;
  position: relative;
  left: 0;
  right: 0;
  width: auto; /* 移除原有的width:100vw和margin-left:-50vw */
}

这样容器会从视口最左侧延伸到最右侧，不会产生溢出。

优化SVG宽度（可选） #

原SVG的width: calc(100% + 1.3px)可能也会造成微小溢出，可以调整为：

.shape-divider svg {
  display: block;
  height: 62px;
  margin-top: -1px;
  width: 100%; /* 替换calc表达式 */
}

保留preserveAspectRatio="none"属性，确保SVG自适应容器宽度且变形正确。

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