互動性
scroll-snap-stop
用於控制是否可以跳過可能的對齊位置的實用程式。
| 類別 | 樣式 |
|---|---|
snap-normal | scroll-snap-stop: normal; |
snap-always | scroll-snap-stop: always; |
範例
強制對齊位置停止
將 snap-always 實用程式與snap-mandatory 實用程式一起使用，以強制對齊容器始終在元素上停止，然後使用者才能繼續滾動到下一個項目
在影像網格中滾動以查看預期行為
對齊點
<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>跳過對齊位置停止
使用 snap-normal 實用程式允許對齊容器跳過可能的滾動對齊位置
在影像網格中滾動以查看預期行為
對齊點
<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>響應式設計
前綴a scroll-snap-stop 實用程式 使用像 md: 這樣的斷點變體，以便僅在中 螢幕尺寸及以上應用該實用程式
<div class="snap-always md:snap-normal ..."> <!-- ... --></div>了解更多關於在變體文件中使用變體的資訊。
