互動性
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:，僅在以下情況下應用該實用程式medium 螢幕尺寸及以上
<div class="snap-center md:snap-start ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的信息。
