Windows设备上页面出现垂直滚动条时内容左移，如何修复？

Windows系统下浏览器滚动条默认属于「占据布局空间」的模式，当overflow-y: auto触发滚动条显示时，会挤占页面可用宽度，导致内容整体左移；而Mac系统滚动条默认是悬浮不占布局的模式，所以不会出现偏移。

方案1：强制常驻滚动条（实现最简单） #

直接给根元素设置永久显示滚动条，避免滚动条出现/消失的状态切换导致布局宽度变化，代码如下：

html {
  overflow-y: scroll;
}

说明：适配所有浏览器，缺点是页面内容高度不足时会显示灰色的不可用滚动条，绝大多数业务场景下可接受。

方案2：标准属性预留滚动位（效果最优） #

使用W3C标准属性scrollbar-gutter实现，主流浏览器（Chrome 94+、Firefox 97+、Safari 15.4+）都已支持，专门用于解决滚动条占位导致的布局偏移问题：

html {
  scrollbar-gutter: stable;
}

说明：会提前给滚动条预留固定宽度的位置，无论滚动条是否出现，内容宽度都保持一致，比方案1更美观，内容高度不足时不会显示灰色不可用滚动条。如果需要页面左右两侧都预留对称边距，可以使用scrollbar-gutter: stable both-edges。

方案3：JS计算抵消宽度（兼容性最好） #

如果需要兼容非常老旧的浏览器版本，可以通过JS动态计算滚动条宽度，给内容区加对应内边距抵消偏移：

function fixScrollShift() {
  // 计算滚动条宽度：窗口总宽度减去页面可布局宽度
  const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth
  document.body.style.paddingRight = `${scrollBarWidth}px`
}
// 页面加载、窗口大小改变时都重新计算适配
window.addEventListener('load', fixScrollShift)
window.addEventListener('resize', fixScrollShift)

说明：兼容性覆盖所有浏览器版本，缺点是需要引入额外JS代码，适合对兼容性要求极高的项目。

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