scrollbar-gutter

用于控制为元素滚动条预留槽位空间的工具类。

快速参考

类	属性
scrollbar-gutter-auto	scrollbar-gutter: auto;
scrollbar-gutter-stable	scrollbar-gutter: stable;
scrollbar-gutter-both	scrollbar-gutter: stable both-edges;

示例

为滚动条预留空间

使用 scrollbar-gutter-stable 工具类，即使元素没有溢出，也为滚动条预留空间：

scrollbar-gutter-auto

Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

scrollbar-gutter-stable

Hey everyone! It’s almost 2027 and we still don’t know if there are aliens living among us, or do we? Maybe the person writing this is an alien. You will never know.

<!-- [!code classes:scrollbar-gutter-stable] -->
<div class="scrollbar-gutter-stable overflow-auto ...">
  <!-- ... -->
</div>

在两侧预留空间

使用 scrollbar-gutter-both 工具类，在元素两侧预留相同的槽位空间：

<!-- [!code classes:scrollbar-gutter-both] -->
<div class="scrollbar-gutter-both overflow-auto ...">
  <!-- ... -->
</div>

使用默认槽位

使用 scrollbar-gutter-auto 工具类，仅在浏览器通常会显示滚动条时才预留槽位空间：

<!-- [!code classes:scrollbar-gutter-auto] -->
<div class="scrollbar-gutter-auto overflow-auto ...">
  <!-- ... -->
</div>

响应式设计

使用 md: 等断点变体为 scrollbar-gutter 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：

<div class="scrollbar-gutter-auto md:scrollbar-gutter-stable ...">
 <!-- ... -->
</div>

在 变体文档 中了解如何使用变体。