浏览器无垂直滚动条时div宽度适配问题的正确处理方案

问题分析 #

你遇到的是滚动条占位导致的视口可用宽度变化问题：默认情况下垂直滚动条会占据视口宽度，页面有无滚动条时视口的实际可用宽度差就是滚动条的宽度，固定宽度的div就会出现偏移或者空隙。

两个备选方案的弊端 #

1. 强制显示垂直滚动条 #

可以实现，只需要加一行CSS：

html { overflow-y: scroll; }

但不推荐：页面内容不足不需要滚动时也会一直显示灰色滚动条，视觉体验很差。

2. JS判断滚动条动态加宽度 #

不推荐：

• 滚动条宽度不固定：不同系统、不同浏览器、不同系统设置下滚动条宽度不一定是17px，比如macOS默认滚动条是悬浮不占宽度的，只有修改系统设置后才会占位，固定加17px会出现适配问题
• 需要监听滚动条的显隐状态，代码维护成本高，容易出现时序问题导致宽度计算错误

最优解决方案 #

优先使用CSS标准属性scrollbar-gutter，这是W3C专门为解决这个场景推出的属性，作用是预留给滚动条的占位空间，无论滚动条是否出现，都会保留对应的宽度，不会导致内容宽度变化：

/* 只在滚动条出现的一侧预留固定位置 */
html { scrollbar-gutter: stable; }

/* 如果需要左右两侧都预留相等间距，避免内容偏左，可以用这个值 */
html { scrollbar-gutter: stable both-edges; }

这个属性的兼容性已经覆盖绝大多数主流浏览器：Chrome 88+、Firefox 97+、Safari 15.4+，完全满足生产环境使用。

旧浏览器兼容方案 #

如果需要兼容更低版本的浏览器，可以选以下任意一种方案：

• 不要给div写死固定宽度，改用max-width: 300px配合margin: 0 auto实现居中，让内容自动适配可用宽度
• 用相对宽度计算，比如width: calc(100vw - 20px)，直接把滚动条的最大可能宽度提前扣减
• 给外层容器设置box-sizing: border-box，把滚动条的占位计算到容器的总宽度里，不会挤压内容

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