譯-使用Scroll Snapping實(shí)現(xiàn)CSS控制頁(yè)面滾動(dòng)

Tychio 發(fā)布于2019-08-29 17:06 / 2336人閱讀

摘要：過(guò)去滾動(dòng)捕捉只能通過(guò)實(shí)現(xiàn)，但現(xiàn)在得益于新的滾動(dòng)捕捉模塊，這種效果已經(jīng)可以通過(guò)實(shí)現(xiàn)了。同時(shí)令人慶幸的是瀏覽器可以根據(jù)用戶的滾動(dòng)方式自動(dòng)控制并判斷是否利用捕捉點(diǎn)捕捉。

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

滾動(dòng)捕捉「Scroll Snapping」是一項(xiàng)你肯定已經(jīng)見(jiàn)過(guò)的技術(shù)。當(dāng)實(shí)現(xiàn)得不佳時(shí)，它會(huì)十分惹人厭，給用戶帶來(lái)很差的瀏覽體驗(yàn)。但當(dāng)實(shí)現(xiàn)得好的時(shí)候，它又會(huì)是用于實(shí)現(xiàn)展示內(nèi)容的功能的好方法，如圖片畫(huà)廊。過(guò)去滾動(dòng)捕捉只能通過(guò)JavaScript實(shí)現(xiàn)，但現(xiàn)在得益于新的CSS滾動(dòng)捕捉模塊「CSS Scroll Snap module」，這種效果已經(jīng)可以通過(guò)CSS實(shí)現(xiàn)了。

同時(shí)令人慶幸的是瀏覽器可以根據(jù)用戶的滾動(dòng)方式自動(dòng)控制并判斷是否利用捕捉點(diǎn)「snap point」捕捉。這可以避免捕捉點(diǎn)阻礙平滑導(dǎo)航這種不好的用戶體驗(yàn)。

讓我們簡(jiǎn)要介紹一下CSS中的滾動(dòng)捕捉是如何工作的。

概覽

與CSS grid或者Flexbox的使用類(lèi)似，滾動(dòng)捕捉的使用需要定義父級(jí)/容器元素，容器內(nèi)的子元素會(huì)根據(jù)容器元素上定義的規(guī)則進(jìn)行捕捉。

Scroll Snapping的相關(guān)屬性中有一些是應(yīng)用在容器元素上的，而另一些則用于子元素。

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

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

假設(shè)你想要某個(gè)容器在y軸上滾動(dòng)，并且在任何情況下都進(jìn)行滾動(dòng)捕捉，那么你可以這樣使用scroll-snap-type屬性：

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

如果你想要在兩個(gè)方向上都進(jìn)行滾動(dòng)捕捉，并且捕捉行為也不需要太過(guò)嚴(yán)格，那么你可以這樣寫(xiě)：

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

scroll-padding

另一個(gè)作用于容器元素上的屬性是scroll-padding，它允許為容器設(shè)置padding，以避免捕捉動(dòng)作在容器的邊緣觸發(fā)。這個(gè)屬性的賦值語(yǔ)法與padding屬性的語(yǔ)法相同。

子元素屬性：scroll-snap-align

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

你必須要設(shè)置元素的scroll-snap-align屬性值，因?yàn)樗某跏贾凳莕one，這表示不會(huì)執(zhí)行任何的捕捉。

scroll-margin

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

scroll-snap-stop

scroll-snap-stop屬性的取值可以為：normal和always，通過(guò)這個(gè)屬性可以指定元素是否強(qiáng)制應(yīng)用捕捉點(diǎn)，即使用戶的滾動(dòng)行為通常會(huì)導(dǎo)致跳過(guò)捕捉。這個(gè)屬性的初始值為normal。

案例

接下來(lái)我們不再停留在理論和屬性介紹上，來(lái)通過(guò)一些簡(jiǎn)單例子的演示一下吧。如果一個(gè)元素的滾動(dòng)是基于y軸之上，且它的scroll strictness被設(shè)置為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;
}

那么它的效果會(huì)像這樣：

案例演示1

相反地，將scroll strictness屬性設(shè)置為proximity，那么捕捉行為將只會(huì)在snap point的近距離范圍內(nèi)發(fā)生。

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

  /* ... */

案例演示2

最后，一起來(lái)看一下當(dāng)「snap snapping」在兩條軸上的滾動(dòng)條上都產(chǎn)生的時(shí)候會(huì)是什么樣子。圖片畫(huà)廊就是一個(gè)這種情況下的完美用例，而我們這里的容器也恰好是一個(gè)網(wǎng)格容器。

首先，寫(xiě)好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;

}

/* ...你懂得 */

然后實(shí)現(xiàn)效果如下：

案例演示3

了解更多

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

Practical CSS Scroll Snapping

實(shí)戰(zhàn)CSS Scroll Snapping（整理自Practical CSS Scroll Snapping）

Well-Controlled Scrolling with CSS Scroll Snap