scrollbar-width

用于控制元素滚动条宽度的工具类。

快速参考

类	属性
scrollbar-auto	scrollbar-width: auto;
scrollbar-thin	scrollbar-width: thin;
scrollbar-none	scrollbar-width: none;

示例

使用默认滚动条宽度

使用 scrollbar-auto 工具类，采用浏览器默认的滚动条宽度：

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

使用细滚动条

使用 scrollbar-thin 工具类，采用更细的滚动条：

The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star maps, expedition notes, and brass instruments cataloged by hand.

On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows and settles on the reading tables.

Visitors can request anything from the collection, but most come for the atlases that chart coastlines no longer found on modern maps.

Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next researcher.

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

隐藏滚动条

使用 scrollbar-none 工具类隐藏滚动条，同时仍允许元素滚动：

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

这些工具类只支持浏览器关键字 auto、thin 和 none。

响应式设计

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

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

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