CSS 滾動捕獲 Scroll Snap

CSS 滾動捕獲允許開發(fā)者通過聲明一些位置(或叫作捕獲位置)來創(chuàng)建精準(zhǔn)控制的滾動體驗. 通常來說輪播圖就是這種體驗的例子, 在輪播圖中, 用戶只能停在圖 A 或者圖 B, 而不能停在 A 和 B 的中間.

比如平時用淘寶或小紅書, 當(dāng)你上滑到下一個推薦內(nèi)容時, 頁面不會停留在兩個推薦內(nèi)容之間. 有限的手機(jī)屏幕尺寸對于這種一項一項展示的內(nèi)容來說, 需要精準(zhǔn)的滑動提供良好的體驗. 當(dāng)然默認(rèn)情況下, 是滾動到哪里就顯示什么內(nèi)容, 不會存在所謂的「吸附」行為

CSS 屬性概覽

下面兩個屬性是定義在滾動容器上的

• scroll-snap-type: 定義滾動容器是否可以捕獲、捕獲是必須的還是可選的、捕獲應(yīng)該發(fā)生在橫向滾動還是縱向滾動上.
• scroll-padding: 定義滾動容器的捕獲偏移.

下面三個屬性是定義在滾動容器中的元素上的

• scroll-snap-align: 滾動容器的子元素和滾動容器對齊方式, 頂部對齊、中間對齊還是底部對齊
• scroll-margin: 滾動容器的子元素的滾動 margin.
• scroll-snap-stop: 是否允許滑動超過應(yīng)該捕獲的位置. 比如當(dāng)前屏幕是 A, 在手機(jī)屏幕上滑動很長的距離, 是否可以快速劃過很多元素(B/C/D/E…)還是一定會停在下一個 B.

一些個專有名詞

有興趣的可以來讀 CSS 規(guī)范. 專有名詞都是這里面定義的

學(xué)習(xí) CSS 就是要鬧明白這個詞啥意思, 那個詞啥意思. CSS 屬性越來越多, 專有名詞也得跟上不是嘛😮?💨

下面三個名詞是針對滾動容器

• scroll container(滾動容器): 很容易理解, 可以滾動的盒子就是滾動容器.
• scroll snap container(滾動捕獲容器): 滾動容器不一定是滾動捕獲容器, 除非其 scroll-snap-type 不是 none
• snapport(捕獲窗口): 滾動容器減去其 scroll-padding 后的區(qū)域.

下面的名詞針對滾動容器的子元素

• scroll snap area(滾動捕獲位置): 既然是針對子元素的, 你可能想當(dāng)然以為就是子元素的 border box, 其實不是, 而是 border box 加上 scroll-margin 指定的區(qū)域.
• snap position(捕獲位置): 不要被位置這兩個字欺騙了, 所謂的位置其實是元素的 scroll snap area 和滾動容器的 snapport 的對齊方式(alignment).

兼容性

滾動捕獲所涉及到的所有屬性, 在 Chrome 75 都得到了完整支持, 當(dāng)然其他瀏覽器也支持, 不過可能在更新的版本.

謝謝你看到這里😊