跳至主要内容

[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 時，則可以使用這個屬性。

子層套用的屬性​

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.

參考​