交互
scroll-snap-type
用于控制滚动捕捉容器中捕捉点执行严格程度的工具类。
| Class | Styles |
|---|---|
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>响应式设计
Prefix a scroll-snap-type utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="snap-none md:snap-x ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.