切换含/不含滚动条的页面时，如何阻止背景偏移？

这个问题我之前帮不少开发者处理过，确实挺影响视觉体验的——滚动条的宽度占用会让两个页面的布局宽度出现差值，进而导致共用的背景图和页面内容来回偏移。下面给你几个实用的解决方案，你可以根据自己的需求选择：

方案1：强制所有页面显示滚动条（你提到的思路优化版） #

直接给所有页面的html元素设置overflow-y: scroll，这样不管页面内容是否足够长，都会保留滚动条的占位空间，两个页面的布局宽度就完全一致了，背景和内容自然不会偏移。

为了避免空滚动条太突兀，你可以自定义滚动条样式，让它在无内容时看起来更和谐：

/* 强制垂直滚动条始终显示 */
html {
  overflow-y: scroll;
}

/* 自定义WebKit内核浏览器滚动条 */
html::-webkit-scrollbar {
  width: 8px; /* 统一滚动条宽度 */
}
html::-webkit-scrollbar-track {
  background-color: transparent; /* 轨道透明 */
}
html::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* 滚动条滑块半透明 */
  border-radius: 4px;
}

/* 兼容Firefox浏览器 */
html {
  scrollbar-width: thin; /* 薄滚动条 */
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* 滑块颜色 + 轨道颜色 */
}

方案2：使用scrollbar-gutter（现代浏览器推荐） #

这是CSS新增的专门解决滚动条占位问题的属性，它会提前预留出滚动条的宽度，但只有当页面需要滚动时才显示滚动条，空出的空间会保留，完美避免布局偏移。

代码非常简洁：

html {
  scrollbar-gutter: stable both-edges;
}

• stable：表示预留滚动条的占位空间，确保布局宽度不变
• both-edges：同时为左右两侧预留空间（垂直滚动条在右侧，其实单独用stable也能解决问题，加上更保险）

这个属性目前Chrome、Firefox、Edge等主流浏览器都已经支持，是最优雅的解决方案。

方案3：给无滚动页面补全宽度差 #

如果不想显示滚动条，你可以给无滚动条的页面添加一个等于滚动条宽度的内边距，让页面内容的实际宽度和有滚动条的页面对齐：

/* 给无滚动条的页面添加样式 */
.no-scroll-page {
  overflow-y: hidden;
  padding-right: calc(100vw - 100%); /* 自动计算滚动条宽度差 */
}

原理是100vw是视口的总宽度（包含滚动条），100%是页面内容的宽度（不含滚动条），两者的差值就是滚动条的宽度，用这个值作为右侧内边距，就能让页面内容和有滚动条的页面保持对齐，背景图也不会偏移。

总结 #

优先推荐方案2（scrollbar-gutter），它是现代浏览器的原生解决方案，代码简洁且体验最好；如果需要兼容老浏览器，方案1的自定义滚动条是稳妥的选择；方案3适合完全不想显示滚动条的场景。

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