交互
scroll-snap-stop
控制是否可以跳过可能的捕捉位置的工具类。
| Class | Styles |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
示例
强制捕捉位置停止
使用 snap-always 工具类与 snap-mandatory 工具类一起使用，以强制捕捉容器在用户继续滚动到下一个项目之前始终在一个元素上停止：
在图片网格中滚动以查看预期行为
捕捉点
<!-- [!代码 类别:snap-x,snap-mandatory,snap-always] --><div class="snap-x snap-mandatory ..."> <div class="snap-center snap-always ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-06.jpg" /> </div></div>跳过捕捉位置停止
使用 snap-normal 工具类来允许捕捉容器跳过可能的滚动捕捉位置：
在图片网格中滚动以查看预期行为
捕捉点
<!-- [!代码 类别:snap-x,snap-normal] --><div class="snap-x ..."> <div class="snap-center snap-normal ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-06.jpg" /> </div></div>响应式设计
Prefix a scroll-snap-stop utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.