互动性
scroll-snap-stop
用于控制是否可以跳过可能的捕捉位置的工具。
| 类 | 样式 |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
示例(Examples)
¥Examples
强制捕捉位置停止(Forcing snap position stops)
¥Forcing snap position stops
将 snap-always 工具与 snap-mandatory 工具一起使用，强制捕捉容器始终在元素上停止，然后用户才能继续滚动到下一个项目：
¥Use the snap-always utility together with the snap-mandatory utility to force a snap container to always stop on an element before the user can continue scrolling to the next item:
在图片网格中滚动以查看预期行为
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>跳过对齐位置停止(Skipping snap position stops)
¥Skipping snap position stops
使用 snap-normal 工具允许捕捉容器跳过可能的滚动捕捉位置：
¥Use the snap-normal utility to allow a snap container to skip past possible scroll snap positions:
在图片网格中滚动以查看预期行为
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>响应式设计(Responsive design)
¥Responsive design
在 scroll-snap-stop 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。