交互性
scroll-snap-type
用于控制在滚动捕捉容器中严格执行捕捉点的实用工具。
| 类 | 样式 |
|---|---|
snap-none | scroll-snap-type: none; |
snap-x | scroll-snap-type: x var(--tw-scroll-snap-strictness); |
snap-y | scroll-snap-type: y var(--tw-scroll-snap-strictness); |
snap-both | scroll-snap-type: both var(--tw-scroll-snap-strictness); |
snap-mandatory | --tw-scroll-snap-strictness: mandatory; |
snap-proximity | --tw-scroll-snap-strictness: proximity; |
示例
水平滚动捕捉
使用 snap-x 实用程序在元素内启用水平滚动捕捉
在图像网格中滚动以查看预期行为
捕捉点
<div class="snap-x ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>为了使滚动捕捉正常工作，您还需要在子项上设置滚动捕捉对齐。
强制滚动捕捉
使用 snap-mandatory 实用程序强制滚动捕捉容器始终停留在捕捉点上
在图像网格中滚动以查看预期行为
捕捉点
<div class="snap-x snap-mandatory ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-06.jpg" /> </div></div>邻近滚动捕捉
使用 snap-proximity 实用程序使滚动捕捉容器停留在附近邻近的捕捉点上
在图像网格中滚动以查看预期行为
捕捉点
<div class="snap-x snap-proximity ..."> <div class="snap-center ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center ..."> <img src="/img/vacation-05.jpg" /> </div></div>响应式设计
前缀a scroll-snap-type 实用程序 带有像 md: 这样的断点变体，仅在以下情况下应用该实用程序中等 屏幕尺寸及以上
<div class="snap-none md:snap-x ..."> <!-- ... --></div>在变体文档中了解有关使用变体的更多信息。
