- Interactivity
- scroll-snap-type
Interactivity
scroll-snap-type
用於控制貼齊容器中貼齊點執行嚴格程度的通用類別。
| Class | Styles |
|---|---|
snap-none | scroll-snap-type: none; |
snap-x | scroll-snap-type: x var(--tw-scroll-snap-strictness); |
snap-y | scroll-snap-type: y var(--tw-scroll-snap-strictness); |
snap-both | scroll-snap-type: both var(--tw-scroll-snap-strictness); |
snap-mandatory | --tw-scroll-snap-strictness: mandatory; |
snap-proximity | --tw-scroll-snap-strictness: proximity; |
範例（Examples）
水平捲動貼齊（Horizontal scroll snapping）
使用 snap-x 通用類別在元素內啟用水平捲動貼齊：
在圖片網格中捲動以查看預期行為
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>要讓捲動貼齊生效，你還需要在子元素上設定捲動貼齊對齊。
強制捲動貼齊（Mandatory scroll snapping）
使用 snap-mandatory 通用類別強制貼齊容器總是停在貼齊點上：
在圖片網格中捲動以查看預期行為
snap point
<div class="snap-x snap-mandatory ..."> <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>鄰近捲動貼齊（Proximity scroll snapping）
使用 snap-proximity 通用類別使貼齊容器停在鄰近的貼齊點上：
在圖片網格中捲動以查看預期行為
snap point
<div class="snap-x snap-proximity ..."> <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>響應式設計（Responsive design）
在 scroll-snap-type 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="snap-none md:snap-x ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。