CSS scroll-snap-align 属性

定义和用法

scroll-snap-align 属性指定了当您停止滚动时，元素将吸附到焦点的位置。

要实现滚动吸附行为，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 屬性。

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

div {
  scroll-snap-align: center;
}

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

#container > img {
  scroll-snap-align: none center;
}

alley bridge in jungle mountains man with camera Cinque Terre

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

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

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