CSS scroll-snap-align 屬性
更多“自己嘗試”的例子見下文。
定義和用法
scroll-snap-align 屬性指定當使用者停止滾動時，元素將聚焦在哪裡。
要實現滾動捕捉行為，必須在子元素上設定 scroll-snap-align 屬性，並在父元素上設定 scroll-snap-type 屬性。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| scroll-snap-align | 69.0 | 79.0 | 68.0 | 11.0 | 56.0 |
CSS 語法
scroll-snap-align: none|start|end|center|block inline|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| none | 無滾動捕捉效果。這是預設值。 |
| start | 在 X 和 Y 軸上，元素開始處進行滾動捕捉。 |
| end | 在 X 和 Y 軸上，元素結束處進行滾動捕捉。 |
| center | 在 X 和 Y 軸上，元素中心處進行滾動捕捉。 |
| block inline | 雙值語法。第一個值指定塊方向的捕捉方式，第二個值指定內聯方向的捕捉方式。 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
圖片庫
scroll-snap-align 屬性對於滾動圖片庫非常有用。在這裡，滾動方向是水平的，捕捉對齊方式是中心。當用戶釋放捲軸時，最近的圖片將捕捉到滾動區域的中間。嘗試點選一張圖片，然後使用左右箭頭鍵滾動瀏覽它們。
#container > img {
scroll-snap-align: none center;
}
在塊方向上，元素開始處對齊捕捉。
當垂直滾動時，scroll-snap-align 屬性也可以設定為在塊方向上，元素開始處對齊捕捉。
#container > div {
scroll-snap-align: start none;
}
相關頁面
CSS scroll-snap-type 屬性：CSS Scroll-snap-type 屬性
