譯-使用Scroll Snapping實現CSS控制頁面滾動

lastSeries 發布于2019-08-02 11:50 / 678人閱讀

摘要：過去滾動捕捉只能通過實現，但現在得益于新的滾動捕捉模塊，這種效果已經可以通過實現了。同時令人慶幸的是瀏覽器可以根據用戶的滾動方式自動控制并判斷是否利用捕捉點捕捉。

特別聲明，本文翻譯自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于譯者能力，譯文或存在不足，歡迎大家指出。如需轉載，煩請注明出處。

滾動捕捉「Scroll Snapping」是一項你肯定已經見過的技術。當實現得不佳時，它會十分惹人厭，給用戶帶來很差的瀏覽體驗。但當實現得好的時候，它又會是用于實現展示內容的功能的好方法，如圖片畫廊。過去滾動捕捉只能通過JavaScript實現，但現在得益于新的CSS滾動捕捉模塊「CSS Scroll Snap module」，這種效果已經可以通過CSS實現了。

同時令人慶幸的是瀏覽器可以根據用戶的滾動方式自動控制并判斷是否利用捕捉點「snap point」捕捉。這可以避免捕捉點阻礙平滑導航這種不好的用戶體驗。

讓我們簡要介紹一下CSS中的滾動捕捉是如何工作的。

概覽

與CSS grid或者Flexbox的使用類似，滾動捕捉的使用需要定義父級/容器元素，容器內的子元素會根據容器元素上定義的規則進行捕捉。

Scroll Snapping的相關屬性中有一些是應用在容器元素上的，而另一些則用于子元素。

容器元素屬性：scroll-snap-type

容器元素上最重要的屬性就是scroll-snap-type。它令一個普通元素成為一個捕捉容器「snap container」元素，并且通過這個屬性可以定義滾動捕捉軸「snap axis」（取值可為：x,y,block,inline,both），同時這個屬性還可以定義滾動捕捉的嚴格性「strictness」（取值可為：none,proximity,mandatory）.

假設你想要某個容器在y軸上滾動，并且在任何情況下都進行滾動捕捉，那么你可以這樣使用scroll-snap-type屬性：

.container {
  scroll-snap-type: y mandatory;
}

如果你想要在兩個方向上都進行滾動捕捉，并且捕捉行為也不需要太過嚴格，那么你可以這樣寫：

.container {
  scroll-snap-type: both proximity;
}

scroll-padding

另一個作用于容器元素上的屬性是scroll-padding，它允許為容器設置padding，以避免捕捉動作在容器的邊緣觸發。這個屬性的賦值語法與padding屬性的語法相同。

子元素屬性：scroll-snap-align

在滾動容器元素的子元素中，scroll-snap-align可能會是最重要的屬性。它可以接收以下幾個值，none，start，end，center，以指定元素是在開頭、中間、還是結束時進行滾動捕獲。基于滾動軸，并假設當前為從左到右的文本方向，那么start可以是頂部或左側，而end可以是底部或右側。

你必須要設置元素的scroll-snap-align屬性值，因為它的初始值是none，這表示不會執行任何的捕捉。

scroll-margin

scroll-margin屬性的使用方式與margin屬性一樣，它可以設置元素中的不同捕捉區域。

scroll-snap-stop

scroll-snap-stop屬性的取值可以為：normal和always，通過這個屬性可以指定元素是否強制應用捕捉點，即使用戶的滾動行為通常會導致跳過捕捉。這個屬性的初始值為normal。

案例

接下來我們不再停留在理論和屬性介紹上，來通過一些簡單例子的演示一下吧。如果一個元素的滾動是基于y軸之上，且它的scroll strictness被設置為mandatory，如下面的代碼所示：

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  border: 2px solid var(--gs0);
  border-radius: 8px;
  height: 33vh;
}
.container div {
  scroll-snap-align: start;

  height: 33vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
}
.container div:nth-child(1) {
  background: hotpink;
  color: white;
}
.container div:nth-child(2) {
  background: azure;
}
.container div:nth-child(3) {
  background: blanchedalmond;
}
.container div:nth-child(4) {
  background: lightcoral;
  color: white;
}

那么它的效果會像這樣：

案例演示1

相反地，將scroll strictness屬性設置為proximity，那么捕捉行為將只會在snap point的近距離范圍內發生。

.container {
  /* ... */
  scroll-snap-type: y proximity;
  overflow-y: scroll;
}

  /* ... */

案例演示2

最后，一起來看一下當「snap snapping」在兩條軸上的滾動條上都產生的時候會是什么樣子。圖片畫廊就是一個這種情況下的完美用例，而我們這里的容器也恰好是一個網格容器。

首先，寫好HTML：

然后是樣式：

.container2 {
  display: grid;
  grid-template-columns: 100% 100% 100%;
  scroll-snap-type: both mandatory;
  overflow: scroll;

  border: 2px solid var(--gs0);
  border-radius: 8px;
  height: 33vh;
}


.container2 div {
  scroll-snap-align: start;

  height: 33vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
}
.container2 div:nth-child(1) {
  background: hotpink;
  color: white;
}
.container2 div:nth-child(2) {
  background: azure;
}
.container2 div:nth-child(3) {
  background: blanchedalmond;
}
.container2 div:nth-child(4) {
  background: lightcoral;
  color: white;
}
.container2 div:nth-child(5) {
  background: rebeccapurple;
  color: white;

}

/* ...你懂得 */

然后實現效果如下：

案例演示3

了解更多

這篇文章淺顯地向大家介紹了一些語法知識，如果你有興趣了解更多的用例和查看更多示例，下面有幾篇不錯的文章。

Practical CSS Scroll Snapping

實戰CSS Scroll Snapping（整理自Practical CSS Scroll Snapping）

Well-Controlled Scrolling with CSS Scroll Snap

GPU云服務器云服務器 scroll滾動 js滾動scroll css滾動條滾動條css

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53148.html

譯-使用Scroll Snapping實現CSS控制頁面滾動

摘要：過去滾動捕捉只能通過實現，但現在得益于新的滾動捕捉模塊，這種效果已經可以通過實現了。同時令人慶幸的是瀏覽器可以根據用戶的滾動方式自動控制并判斷是否利用捕捉點捕捉。特別聲明，本文翻譯自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文，受限于譯者能力，譯文或存在不足，歡迎大家指出。如需轉載，煩請注明出處。滾...

Tychio 2019-08-29 17:06 評論0 收藏0
CSS scroll snap points 實現漸進增強的滾動

摘要：漸近增強剛好最近看到這篇文章，如果結合每次滾動的時候每個條目始終在中間這樣效果就更好了。效果如下查看瀏覽器支持情況遺憾的是目前只有和上的和原生支持需要前綴，好在這種可以當做漸進增強，即使瀏覽器不支持也不影響功能。前言前幾天在 segmentfault 上看到有人問下面這個效果（segmentfault app 中的）怎么實現，感覺這個效果體驗還不錯（在移動端沒有滾動條的情況能夠提示...

CloudDeveloper 2019-08-29 10:59 評論0 收藏0
【譯】通過例子解釋 Debounce 和 Throttle

摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發很多次事件。不支持，所以不能在服務端用于文件系統事件。總結將一系列迅速觸發的事件例如敲擊鍵盤合并成一個單獨的事件。確保一個持續的操作流以每毫秒執行一次的速度執行。 Debounce 和 Throttle 是兩個很相似但是又不同的技術，都可以控制一個函數在一段時間內執行的次數。當我們在操作 DOM 事件的時候，為函數添加 debounce 或者 th...

LeoHsiun 2019-08-23 11:34 評論0 收藏0
[譯] 前端項目中常見的 CSS 問題

摘要：我們的例子中有個卡片項目，看起來沒什么問題。這將改善移動端的用戶體驗，并使用戶更容易訪問。大圖預覽結論這里提到的所有問題都是我在前端開發工作中最常遇到的。你在中有沒有經常遇到什么問題呢歡迎在評論區分享原文地址：Common CSS Issues For Front-End Projects 原文作者：Ahmad Shadeed 譯者：Chor 快速摘要：近年來，跨瀏覽器的渲染和...

AbnerMing 2019-08-02 15:21 評論0 收藏0
[譯] 前端項目中常見的 CSS 問題

摘要：我們的例子中有個卡片項目，看起來沒什么問題。這將改善移動端的用戶體驗，并使用戶更容易訪問。大圖預覽結論這里提到的所有問題都是我在前端開發工作中最常遇到的。你在中有沒有經常遇到什么問題呢歡迎在評論區分享原文地址：Common CSS Issues For Front-End Projects 原文作者：Ahmad Shadeed 譯者：Chor 快速摘要：近年來，跨瀏覽器的渲染和...

whatsns 2019-08-30 11:13 評論0 收藏0