scroll-snap-stop
用于控制是否可以跳过可能的捕捉位置的工具。
快速参考
| 类别 | 样式 |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
示例
强制停止在捕捉点
结合使用 snap-always 和 snap-mandatory 工具，可以强制滚动容器在用户继续滚动到下一个项目之前始终停止在某个元素上：
在图片网格中滚动以查看预期行为
snap point
<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 point
<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>
响应式设计
在 scroll-snap-stop 工具前加上 md: 等断点变体，只在中等屏幕尺寸及以上应用该工具：
<div class="snap-always md:snap-normal ...">
<!-- ... -->
</div>
在 变体文档 中了解更多关于使用变体的信息。