互动性
scrollbar-gutter
用于控制为元素滚动条预留的边距空间的工具。
| 类 | 样式 |
|---|---|
scrollbar-gutter-auto | scrollbar-gutter: auto; |
scrollbar-gutter-stable | scrollbar-gutter: stable; |
scrollbar-gutter-both | scrollbar-gutter: stable both-edges; |
示例(Examples)
为滚动条保留空间(Reserving space for the scrollbar)
使用 scrollbar-gutter-stable 工具为滚动条保留空间，即使元素没有溢出：
🌐 Use the scrollbar-gutter-stable utility to reserve space for the scrollbar even when an element isn't overflowing:
scrollbar-gutter-auto
scrollbar-gutter-stable
<div class="scrollbar-gutter-stable overflow-auto ..."> <!-- ... --></div>在两侧留出空间(Reserving space on both sides)
使用 scrollbar-gutter-both 工具在元素的两侧保留相应的间隙空间：
🌐 Use the scrollbar-gutter-both utility to reserve matching gutter space on both sides of the element:
<div class="scrollbar-gutter-both overflow-auto ..."> <!-- ... --></div>使用默认间距(Using the default gutter)
使用 scrollbar-gutter-auto 工具仅在浏览器通常会显示滚动条时保留边距空间：
🌐 Use the scrollbar-gutter-auto utility to only reserve gutter space when the browser would normally show a scrollbar:
<div class="scrollbar-gutter-auto overflow-auto ..."> <!-- ... --></div>响应式设计(Responsive design)
在 scrollbar-gutter 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="scrollbar-gutter-auto md:scrollbar-gutter-stable ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。