互動性
scroll-snap-type
用於控制在 Snap 容器中強制執行 Snap 點的嚴格程度的工具。
| 類別 | 樣式 |
|---|---|
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; |
範例
水平捲動對齊
使用 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>為了使捲動對齊能正常運作，您還需要設定子元素的捲動對齊方式。
強制捲動對齊
使用 snap-mandatory 工具強制 Snap 容器始終停在 Snap 點上。
在圖片網格中捲動以查看預期行為
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>鄰近捲動對齊
使用 snap-proximity 工具使 Snap 容器停在鄰近的 Snap 點上。
在圖片網格中捲動以查看預期行為
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>響應式設計
前綴a scroll-snap-type 工具 與中斷點變體（如 md:）一起使用，以便僅在medium 螢幕尺寸及以上套用此工具。
<div class="snap-none md:snap-x ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的信息。
