交互性
scroll-snap-align
用于控制元素滚动捕捉对齐方式的实用工具。
| 类名 | 样式 |
|---|---|
snap-start | scroll-snap-align: start; |
snap-end | scroll-snap-align: end; |
snap-center | scroll-snap-align: center; |
snap-align-none | scroll-snap-align: none; |
示例
捕捉到中心
使用 snap-center 实用程序将元素捕捉到其中心，当在捕捉容器内滚动时
在图像网格中滚动以查看预期行为
捕捉点
<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-start 实用程序将元素捕捉到其开始位置，当在捕捉容器内滚动时
在图像网格中滚动以查看预期行为
捕捉点
<div class="snap-x ..."> <div class="snap-start ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-start ..."> <img src="/img/vacation-06.jpg" /> </div></div>捕捉到结束位置
使用 snap-end 实用程序将元素捕捉到其结束位置，当在捕捉容器内滚动时
在图像网格中滚动以查看预期行为
捕捉点
<div class="snap-x ..."> <div class="snap-end ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-end ..."> <img src="/img/vacation-06.jpg" /> </div></div>响应式设计
前缀a scroll-snap-align 实用类 带有断点变体，如 md:，仅在以下情况下应用实用类中等 屏幕尺寸及以上
<div class="snap-center md:snap-start ..."> <!-- ... --></div>在变体文档中了解有关使用变体的更多信息。