CSS 滚动条装订线：scrollbar-gutter: stable 详解：防止弹窗出现时的页面抖动 各位同学，大家好！今天我们来深入探讨一个看似细微，却对用户体验影响颇大的 CSS 属性：scrollbar-gutter。特别是当涉及到弹窗（modal）出现时，它如何帮助我们避免页面抖动的问题。 问题的根源：滚动条的出现与消失 在很多网页设计中，当页面内容高度超过视口高度时，浏览器会自动显示滚动条。滚动条占据了一定的宽度，通常是十几个像素。当页面内容较少，不需要滚动条时，滚动条区域则为空白。 现在，假设你有一个页面，初始状态下没有滚动条。这时，你点击一个按钮，弹出一个 modal 窗口。这个 modal 窗口可能会导致页面整体内容高度增加，从而触发滚动条的出现。 问题就出在这里： 滚动条突然出现，会“挤压”页面内容，导致页面向左偏移，产生我们所说的“抖动”。这对于用户来说，是一种非常不好的体验，会让人感到页面不稳定、不流畅。 更糟糕的是，如果 modal 窗口关闭，滚动条消失，页面又会向右偏移，再次抖动。 scrollbar-gutter 的作用：预留滚动条空间 scrollbar …