互动性
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)
捕捉到中心(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)
使用 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)
使用 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)
在 scroll-snap-align 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="snap-center md:snap-start ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。