交互性
scroll-snap-stop
用于控制是否可以跳过可能的吸附位置的实用工具。
| 类名 | 样式 |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
示例
强制吸附位置停止
将 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 实用工具以允许吸附容器跳过可能的滚动吸附位置
在图像网格中滚动以查看预期行为
吸附点
<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>响应式设计
前缀a scroll-snap-stop 实用工具 使用断点变体（如 md:）以仅在中等 屏幕尺寸及以上时应用该实用工具
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>了解更多关于在变体文档中使用变体的信息。