CSS scroll-snap-align 屬性

定義和用法

scroll-snap-align 屬性指定了當您停止滾動時，元素將吸附到焦點的位置。

要實現滾動吸附行為，必須在子元素上設置 scroll-snap-align 屬性，并在父元素上設置 scroll-snap-type 屬性。

實例

例子 1

當用戶停止滾動時，使最近的元素吸附到中心位置：

div {
  scroll-snap-align: center;
}

親自試一試

例子 2：圖片庫

scroll-snap-align 屬性非常適合用于滾動瀏覽圖片庫。在這里，滾動方向是水平的，吸附對齊方式是居中。當用戶松開滾動條時，最近的圖片將吸附到可滾動區域的中間位置。嘗試點擊一張圖片，然后使用左右箭頭鍵滾動瀏覽它們：

#container > img {
  scroll-snap-align: none center;
}
Beijing Dancer Wuhan Tulip Hangzhou

親自試一試

alley bridge in jungle mountains man with camera Cinque Terre

例子 3：在塊方向上垂直對齊吸附位置

當垂直滾動時，scroll-snap-align 屬性也可以在塊方向上設置為元素的起始位置：

#container > div {
  scroll-snap-align: start none;
}

親自試一試

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。

技術細節

默認值： none
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.scrollSnapAlign="start"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

相關頁面

參考：CSS scroll-snap-type 屬性