- Interactivity
- scroll-snap-stop
Interactivity
scroll-snap-stop
用於控制是否可以跳過可能的貼齊位置的通用類別。
| Class | Styles |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
範例（Examples）
強制貼齊位置停止（Forcing snap position stops）
將 snap-always 通用類別與 snap-mandatory 通用類別一起使用，強制貼齊容器在使用者繼續捲動到下一個項目之前總是停在某個元素上：
在圖片網格中捲動以查看預期行為
snap point
<div class="snap-x snap-mandatory ..."> <div class="snap-center snap-always ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-always ..."> <img src="/img/vacation-06.jpg" /> </div></div>跳過貼齊位置停止（Skipping snap position stops）
使用 snap-normal 通用類別允許貼齊容器跳過可能的捲動貼齊位置：
在圖片網格中捲動以查看預期行為
snap point
<div class="snap-x ..."> <div class="snap-center snap-normal ..."> <img src="/img/vacation-01.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-02.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-03.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-04.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-05.jpg" /> </div> <div class="snap-center snap-normal ..."> <img src="/img/vacation-06.jpg" /> </div></div>響應式設計（Responsive design）
在 scroll-snap-stop 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。