在css中解决滚动条出现导致的盒模型内容宽度抖动，最直接有效的方法是使用 scrollbar-gutter: stable 属性。该属性强制浏览器为垂直滚动条预留空间，即使页面内容未超出视口高度，也会保持布局宽度不变，从而避免滚动条出现时内容向左挤压的视觉跳动。
scrollbar-gutter 属性的具体用法是什么
要启用此功能，只需在根元素或需要稳定宽度的容器上设置 scrollbar-gutter: stable。这会让浏览器始终保留滚动条的宽度空间，确保 width: 100% 的元素在不同状态下宽度一致。
html {
scrollbar-gutter: stable;
}
上述代码将 scrollbar-gutter 应用于 html 元素，使得整个文档的布局在有无滚动条时保持一致。浏览器会自动计算滚动条宽度并预留空间，无需手动调整 margin 或 padding。
如果需要使用 overflow: hidden 隐藏滚动条，该如何处理
当使用 overflow: hidden 隐藏滚动条时，仍需配合 scrollbar-gutter: stable 来防止抖动。这样既保持了视觉上的整洁，又确保了布局的稳定性。
body {
overflow: hidden;
scrollbar-gutter: stable;
}
这段代码在隐藏滚动条的同时，通过 scrollbar-gutter: stable 预留了滚动条空间，避免了因滚动条显示与否导致的布局变化。这种方法适用于需要固定布局且不希望用户看到滚动条的场景。
在旧版浏览器中如何实现类似效果
对于不支持 scrollbar-gutter 的旧版浏览器，可以通过 JavaScript 动态计算滚动条宽度并应用 margin-right 来实现类似效果。虽然这不是纯 CSS 解决方案，但在兼容性要求较高的场景中仍具实用价值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
