CSS scroll-snap-type 屬性

定義和用法

scroll-snap-type 屬性指定了當您停止滾動時，元素將如何吸附到焦點以及吸附的方向。

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

實例

例子 1

在 x 軸上設置滾動吸附功能：

#container {
  scroll-snap-type: x mandatory;
}

親自試一試

例子 2：在 x 軸和 y 軸上設置吸附行為

在 x 軸和 y 軸上均設置 scroll-snap-type 屬性：

#container > div {
  scroll-snap-type: both mandatory;
}





親自試一試

例子 3：帶有鄰近性的吸附行為

在 x 軸和 y 軸上設置帶有鄰近性行為的 scroll-snap-type 屬性。使用此屬性值時，如果滾動操作正好停止在兩個元素的中間位置，則不會進行吸附：

#container > div {
  scroll-snap-type: both proximity;
}





親自試一試

CSS 語法

scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;

屬性值

值 描述
none 無滾動吸附效果。默認值。
x 在 x 軸上設置滾動吸附效果。
y 在 y 軸上設置滾動吸附效果。
block 在塊級方向上設置滾動吸附效果。
inline 在行內方向上設置滾動吸附效果。
both 在 x 軸和 y 軸上均設置滾動吸附效果。
mandatory 滾動操作完成后，滾動將自動移動到吸附點。
proximity

類似于 mandatory，但不如其嚴格。

滾動操作完成后，滾動將自動移動到吸附點，但在吸附點之間有一個區域沒有吸附效果。

取決于瀏覽器參數。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

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

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

相關頁面

參考：CSS scroll-snap-align 屬性