本篇內(nèi)容介紹了“如何使用sroll-snap-type優(yōu)化滾動”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)建站成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點，以客戶需求中心、市場為導(dǎo)向”的快速反應(yīng)體系。對公司的主營項目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計、行業(yè) / 企業(yè)門戶設(shè)計推廣、行業(yè)門戶平臺運營、手機APP定制開發(fā)、移動網(wǎng)站建設(shè)、微信網(wǎng)站制作、軟件開發(fā)、成都服務(wù)器托管等實行標準化操作，讓客戶可以直觀的預(yù)知到從創(chuàng)新互聯(lián)建站可以獲得的服務(wù)效果。

使用 sroll-snap-type 優(yōu)化滾動

sroll-snap-type

首先看看 sroll-snap-type 可能算得上是新的滾動規(guī)范里面最核心的一個屬性樣式。

scroll-snap-type：屬性定義在滾動容器中的一個臨時點（snap point）如何被嚴格的執(zhí)行。

光看定義有點難理解，簡單而言，這個屬性規(guī)定了一個容器是否對內(nèi)部滾動動作進行捕捉，并且規(guī)定了如何去處理滾動結(jié)束狀態(tài)。

語法

{
    scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
}

舉個例子，假設(shè)，我們希望一個橫向可滾動容器，每次滾動之后，子元素最終的停留位置不是尷尬的被分割，而是完整的呈現(xiàn)在容器內(nèi)，可以這樣寫：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
    scroll-snap-type: x mandatory;
}

li {
    scroll-snap-align: center;
}　　

上面 scroll-snap-type: x mandatory 中，x 表示捕捉 x 軸方向上的滾動，mandatory 表示強制將滾動結(jié)束后元素的停留位置設(shè)置到我們規(guī)定的地方。

左邊是正常滾動容器的寫法，右邊是添加了 scroll-snap- 之后： 

如果是 y 軸方向的滾動也是一樣的，只需要簡單改一下 scroll-snap-type：

ul {
    scroll-snap-type: y mandatory;
}

CodePen Demo -- CSS Scroll Snap Demo

scroll-snap-align 中的 mandatory 與 proximity

scroll-snap-align 中的另外一個重點就是 mandatory 與 proximity。

• mandatory: 通常在 CSS 代碼中我們都會使用這個，mandatory 的英文意思是強制性的，表示滾動結(jié)束后，滾動停止點一定會強制停在我們指定的地方

• proximity: 英文意思是接近、臨近、大約，在這個屬性中的意思是滾動結(jié)束后，滾動停止點可能就是滾動停止的地方，也可能會再進行額外移動，停在我們指定的地方

也就是說，如上指定了 scroll-snap-align: y proximity 的滾動容器，如果不額外設(shè)置 scroll-snap-margin/scroll-snap-padding，是有可能停在下面這樣~尷尬~的位置：

scroll-snap-type: both mandatory

當(dāng)然，還有一種比較特殊的情況是，scroll-snap-type: both mandatory，表示橫向與豎向的滾動，都會同時進行捕捉，也是可以的：

CodePen Demo -- CSS Scroll Snap Both mandatory Demo

scroll-snap-align

使用 scroll-snap-align 可以簡單的控制將要聚焦的當(dāng)前滾動子元素在滾動方向上相對于父容器的對齊方式。

其需要作用在父元素上，可選值有三個：

{
    scroll-snap-align: start | center | end;
}

什么意思呢，看看示意圖：

可以類比單個元素在 flexbox 里面的 justify-content 屬性的 flex-start | flex-end | center，規(guī)定當(dāng)前元素在主軸上相對父容器的對齊方式去理解。

再看看實際的 Demo ，將 scroll-snap-align 添加到滾動子容器上：

scroll-snap-align: start

使當(dāng)前聚焦的滾動子元素在滾動方向上相對于父容器頂部對齊。

scroll-snap-align: center

使當(dāng)前聚焦的滾動子元素在滾動方向上相對于父容器中心對齊。

scroll-snap-align: end

使當(dāng)前聚焦的滾動子元素在滾動方向上相對于父容器底部對齊。 

CodePen Demo -- CSS Scroll Snap Demo

不規(guī)則子元素滾動

如果子元素大小不一，也能有非常好的表現(xiàn)，使用 scroll-snap-align: center，使得不規(guī)則子元素在每次滾動后居于容器中間：

CodePen Demo -- CSS Scroll Snap 不規(guī)則子元素滾動 Demo

scroll-margin / scroll-padding

上述的 scroll-snap-align 很好用，可以控制滾動子元素與父容器的對齊方式。然而可選的值只有三個，有的時候我們希望進行一些更精細的控制時，可以使用 scroll-margin 或者 scroll-padding

其中：

• scroll-padding 是作用于滾動父容器，類似于盒子的 padding

• scroll-margin 是作用于滾動子元素，每個子元素的 scroll-margin 可以設(shè)置為不一樣的值，類似于盒子的 margin

舉個例子，在豎向滾動下，給滾動父容器添加一個 scroll-padding-top: 30px 等同于給每個子元素添加 ``scroll-margin-top: 30px`：

我們希望滾動子元素在 scroll-snap-align: start 的基礎(chǔ)上，與容器頂部的距離為 30px：

<ul class="snap">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  ...
</ul>　　

.snap {
    overflow-x: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 30px;
}

li {
    scroll-snap-align: start;
}

總結(jié)一下就是，scroll-snap-align 可以對滾動之后的對齊方式進行簡單控制，而配合 scroll-margin / scroll-padding 則可以進行精確控制。

廢棄的 scroll-snap-points-x / scroll-snap-points-y

標準的發(fā)展過程，早年間的規(guī)范如今廢除，這個了解一下即可，新標準現(xiàn)在是這幾個，并且大部分瀏覽器已經(jīng)兼容：

• scroll-snap-type

• scroll-snap-align

• scroll-margin / scroll-padding

• scroll-snap-stop

scroll-snap-stop 是一個仍處于實驗室的標準，本文沒有過多介紹，我自己在幾個不同瀏覽器嘗試了下，暫時沒有發(fā)現(xiàn)瀏覽器支持這個屬性，但是最新的標準里面是有關(guān)于它的明確的定義的。

實際應(yīng)用，漸進增強

在實際應(yīng)用中，應(yīng)用在全屏滾動/廣告banner上有很多用武之地：

CodePen Demo -- full screen scroll

當(dāng)然，兼容性現(xiàn)在還是很大的問題：

不過在很多場景下，就算 scroll-snap- 相關(guān)幾個屬性暫不兼容，也不會對正常使用造成影響，所以在很多場景，這些屬性都可以直接應(yīng)用上去，對支持的瀏覽器提供更好的交互。

“如何使用sroll-snap-type優(yōu)化滾動”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

分享題目：如何使用sroll-snap-type優(yōu)化滾動
鏈接URL：http://www.ekvhdxd.cn/article34/ghdjse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、服務(wù)器托管、App設(shè)計、微信小程序、、網(wǎng)站營銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)