互动性
scrollbar-width
用于控制元素滚动条宽度的工具。
| 类 | 样式 |
|---|---|
scrollbar-auto | scrollbar-width: auto; |
scrollbar-thin | scrollbar-width: thin; |
scrollbar-none | scrollbar-width: none; |
示例(Examples)
使用默认滚动条宽度(Using the default scrollbar width)
使用 scrollbar-auto 工具来使用浏览器的默认滚动条宽度：
🌐 Use the scrollbar-auto utility to use the browser's default scrollbar width:
<div class="scrollbar-auto overflow-auto ..."> <!-- ... --></div>使用细滚动条(Using a thin scrollbar)
使用 scrollbar-thin 工具来使用更细的滚动条：
🌐 Use the scrollbar-thin utility to use a thinner scrollbar:
垂直滚动
<div class="scrollbar-thin overflow-auto ..."> <!-- ... --></div>隐藏滚动条(Hiding scrollbars)
使用 scrollbar-none 工具在仍然允许元素滚动的情况下隐藏滚动条：
🌐 Use the scrollbar-none utility to hide scrollbars while still allowing an element to scroll:
<div class="scrollbar-none overflow-auto ..."> <!-- ... --></div>这些工具仅支持浏览器关键词 auto、thin 和 none。
🌐 These utilities only support the browser keywords auto, thin, and none.
响应式设计(Responsive design)
在 scrollbar-width 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="scrollbar-none md:scrollbar-auto ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。