互动性
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; |
示例(Examples)
水平滚动捕捉(Horizontal scroll snapping)
使用 snap-x 工具在元素内启用水平滚动捕捉：
🌐 Use the snap-x utility to enable horizontal scroll snapping within an element:
在图片网格中滚动以查看预期行为
snap point
<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>要使滚动捕捉生效，你还需要在子元素上设置滚动捕捉对齐。
🌐 For scroll snapping to work, you need to also set the scroll snap alignment on the children.
强制滚动捕捉(Mandatory scroll snapping)
使用 snap-mandatory 工具强制快照容器始终停在快照点上：
🌐 Use the snap-mandatory utility to force a snap container to always come to rest on a snap point:
在图片网格中滚动以查看预期行为
snap point
<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>接近滚动捕捉(Proximity scroll snapping)
使用 snap-proximity 工具使快照容器停在接近的捕捉点上：
🌐 Use the snap-proximity utility to make a snap container come to rest on snap points that are close in proximity:
在图片网格中滚动以查看预期行为
snap point
<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>响应式设计(Responsive design)
在 scroll-snap-type 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="snap-none md:snap-x ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。