CSS scroll-snap-type 屬性
更多“自己嘗試”的例子見下文。
定義和用法
scroll-snap-type 屬性指定了停止滾動時元素將如何聚焦，以及聚焦的方向。
要實現滾動捕捉行為，必須在父元素上設定 scroll-snap-type 屬性，並在子元素上設定 scroll-snap-align 屬性。
| 預設值 | none |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.scrollSnapType="x mandatory" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| scroll-snap-type | 69.0 | 79.0 | 99.0 | 11.0 | 56.0 |
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 |
更多示例
雙向滾動捕捉
scroll-snap-type 屬性同時設定在 x 軸和 y 軸上。
#container > div {
scroll-snap-type: both mandatory;
}
帶有 proximity 的滾動捕捉
scroll-snap-type 屬性同時設定在 x 軸和 y 軸上，並具有 proximity 行為。使用此屬性值，如果滾動操作在兩個元素中間停止，則不會進行捕捉。
#container > div {
scroll-snap-type: both proximity;
}
相關頁面
CSS scroll-snap-align 屬性：CSS Scroll-snap-align 屬性
