[CSS] scroll-snap
這裡的 snap 指的是「突然地移動到某個位置」。和 grid
以及 flex
一樣,scroll-snap
也會有一個 container
以及裡面的 child
。
父層套用的屬性
scroll-snap-type
mandatory
指的是當使用者停止捲動的時候,瀏覽器會自動捲到到一個斷點上(snap point)。proximity
則沒這麼嚴格,瀏覽器只有在當捲到接近的地方時,才會自動捲到斷點上。
// 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 時,則可以使用這個屬性。