一个 CSS 技巧即可消除滚动条布局偏移

当网页内容超出视口高度时，浏览器通常会显示垂直滚动条。这会导致布局偏移，尤其是在页面间切换或更改内容可见性时，因为滚动条的出现或消失会改变内容的可用宽度。

例如，我在一个应用中就遇到过这个问题：内容溢出后，滚动条出现，导致文本区域中的文本向左偏移。

为了解决这个问题，你可以使用 CSS 属性 scrollbar-gutter，它允许你为滚动条预留空间，防止滚动条出现或消失时布局发生偏移。

更具体地说，你可以将 body 元素（或其他任何容器元素）的 scrollbar-gutter 属性设置为 stable，以确保始终为滚动条预留空间。

就我而言，我将此属性添加到了 textarea 元素上。

textarea {
  scrollbar-gutter: stable;
}

这样，无论滚动条是否存在，布局都能保持一致。从下面的 GIF 动画中可以看出，当滚动条出现时，文本区域的内容不会发生偏移。

scrollbar-gutter 属性是 CSS 中一个相对较新的属性，自 2024 年 12 月起，大多数现代浏览器都支持它。因此，你可以放心地使用它来提升网页的用户体验。