CSS 滾動(dòng)捕獲 Scroll Snap

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

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

CSS 屬性概覽

下面兩個(gè)屬性是定義在滾動(dòng)容器上的

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

下面三個(gè)屬性是定義在滾動(dòng)容器中的元素上的

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

一些個(gè)專有名詞

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

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

下面三個(gè)名詞是針對(duì)滾動(dòng)容器

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

下面的名詞針對(duì)滾動(dòng)容器的子元素

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

兼容性

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

謝謝你看到這里😊