Interactivity
scroll-snap-align
用于控制元素滚动捕捉对齐的实用程序。
| Class | Styles |
|---|---|
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 实用程序在滚动容器内滚动时将元素对齐到其中心：
在图像网格中滚动以查看预期行为
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>对齐到开始
使用 snap-start 实用程序在滚动容器内滚动时将元素对齐到其开始：
在图像网格中滚动以查看预期行为
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>对齐到结束
使用 snap-end 实用程序在滚动容器内滚动时将元素对齐到其结束：
在图像网格中滚动以查看预期行为
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>响应式设计
Prefix a scroll-snap-align utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="snap-center md:snap-start ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.
