Published on

CSS Scroll Snap

Authors

今天來介紹 CSS 一個好用的屬性 scroll-snap：在網頁停止滾動後，瀏覽器會自動滾動到指定的斷點上。

先來個例子：

簡介

跟 flex 一樣，在使用 scroll-snap 時，需要對父容器和子元素加上不同的屬性。

父容器的屬性

scroll-snap-type

用來定義此容器的滾動行為類型。

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
  • none: 預設值。它會忽略 snap points。
  • x: 水平軸。
  • y: 垂直軸。
  • block: block 元素排列的方向（通常為垂直軸）。
  • inline: inline 元素排列的方向（通常為水平軸）。
  • both: 雙軸（水平與垂直）都有。

另一個可選屬性值為 mandatory or proximity。

  • mandatory: 強制滾動到指定的斷點上。
  • proximity: 則是在接近斷點時，才會自動滾動到斷點上。

scroll-padding

這個屬性很直觀，就是定義滾動後的斷點與容器邊界的距離。

scroll-padding: [ auto | <length-percentage> ]{1,4}

/* <length-percentage> = <length> | <percentage> */

如果 scroll-snap-type 是 block or inline。

可以用下面的語法：

scroll-padding-[ block | inline ]: [ auto | <length-percentage> ]{1,2}

/* 還能寫成 scroll-padding-[ block | inline ]-[ start | end ] */

子元素的屬性

scroll-snap-align

定義子元素與父容器對齊的位置。

scroll-snap-align: [ none | start | end | center ]{1,2}
  • none: 預設值。忽略。
  • start: 起始點。（一般來說是指左邊或上面。）
  • end: 結束點。（一般來說是指右邊或下面。）
  • center: 中心點。

scroll-margin

與 scroll-padding 相似，定義子元素的斷點與容器距離。

scroll-margin: <length>{1,4}

因為是使用在子元素上，所以可以對不同的元素使用不同的屬性值。

scroll-snap-stop

定義容器是否能越過元素或是必定停下。

scroll-snap-stop: normal | always

這個屬性還在實驗中，目前連 Firefox 與 Safari 都尚未支援，先暫不討論。

有興趣的話，可以看這裡。

心得後記

在以前要實作這個功能時，只能用 js 監控 scroll event，取得 scroll 的距離，然後再計算位置，最後移動元素位置。光這一個功能，就要花掉一堆時間。現在只要寫個幾行，還不用管 scroll event 的效能，省下的時間還能拿來泡個咖啡休息一下，順便感嘆 CSS 的美妙！ 雖然現在能用純 CSS，不過如果考慮到要支援舊版 IE，那也只好雙手一攤，乖乖用 js 吧。

參考資料

CSS Scroll Snap - CSS: Cascading Style Sheets | MDN Can I Use - CSS-Snappoints

Discuss on Facebook