PJCHENder 未整理筆記

[CSS] scroll-snap

2018-11-28

[CSS] scroll-snap

@(CSS)[]

這裡的 snap 指的是「突然地移動到某個位置」。和 grid 以及 flex 一樣,scroll-snap 也會有一個 container 以及裡面的 child

父層套用的屬性

scroll-snap-type

  • mandatory 指的是當使用者停止捲動的時候,瀏覽器會自動捲到到一個斷點上(snap point)。
  • proximity 則沒這麼嚴格,瀏覽器只有在當捲到接近的地方時,才會自動捲到斷點上。
1
2
3
4
5
6
7
8
// scroll-snap-type

/* Optional mandatory | proximity*/
.scroll-snap-container {
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;
}

scroll-padding

預設的情況下,內容會自動捲動到 container 的邊界,如果有需要則可以透過在 container 上設定 scroll-padding 屬性,來使得它不要這麼貼邊。例如,當你的版面有 fixed header 時,則可以使用這個屬性。

子層套用的屬性

scroll-snap-align

透過 scroll-snap-align 可以設定要以子層的哪個位置對齊父層,包含 start, center, end

scroll-snap-stop

預設的情況下,scoll snapping 的效果只有在使用者停止捲動(scroll)時才會觸發,也就是說,使用者可以停止捲動前,跳過許多不同的 snap point。

如果有需要的話,可以在 child 元素上使用 scroll-snap-stop: always,這會使得使用者在繼續捲動前,停留在特定元素上(tracking bug for Chrome)。

例子

See the Pen [CSS] Scroll Snap by PJCHEN (@PJCHENder) on CodePen.

參考

Tags: scroll

掃描二維條碼,分享此文章