互动性
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; |
示例(Examples)
¥Examples
捕捉到中心(Snapping to the center)
¥Snapping to the center
使用 snap-center 工具在元素在捕捉容器内滚动时将其捕捉到其中心：
¥Use the snap-center utility to snap an element to its center when being scrolled inside a snap container:
在图片网格中滚动以查看预期行为
snap point
<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>捕捉到开始(Snapping to the start)
¥Snapping to the start
使用 snap-start 工具在元素在捕捉容器内滚动时将其捕捉到其开头：
¥Use the snap-start utility to snap an element to its start when being scrolled inside a snap container:
在图片网格中滚动以查看预期行为
snap point
<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>捕捉到最后(Snapping to the end)
¥Snapping to the end
使用 snap-end 工具在元素在捕捉容器内滚动时将其捕捉到其末尾：
¥Use the snap-end utility to snap an element to its end when being scrolled inside a snap container:
在图片网格中滚动以查看预期行为
snap point
<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>响应式设计(Responsive design)
¥Responsive design
在 scroll-snap-align 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="snap-center md:snap-start ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。