- Interactivity
- scroll-snap-align
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; |
範例（Examples）
貼齊到中央（Snapping to the center）
使用 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>貼齊到起始位置（Snapping to the start）
使用 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>貼齊到結束位置（Snapping to the end）
使用 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>響應式設計（Responsive design）
在 scroll-snap-align 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="snap-center md:snap-start ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。