這篇文章將為大家詳細(xì)講解有關(guān)css中sroll-snap-type屬性有什么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

為臨河等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及臨河網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、臨河網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

sroll-snap-type

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

scroll-snap-type：屬性定義在滾動(dòng)容器中的一個(gè)臨時(shí)點(diǎn)（snap point）如何被嚴(yán)格的執(zhí)行。

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

語(yǔ)法

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

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

    
1
    
2
    
3

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

li {
    scroll-snap-align: center;
}　　

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

左邊是正常滾動(dòng)容器的寫(xiě)法，右邊是添加了 scroll-snap- 之后：

如果是 y 軸方向的滾動(dòng)也是一樣的，只需要簡(jiǎn)單改一下 scroll-snap-type：

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

CodePen Demo -- CSS Scroll Snap Demo

scroll-snap-type 中的 mandatory 與 proximity

scroll-snap-type 中的另外一個(gè)重點(diǎn)就是 mandatory 與 proximity。

• mandatory: 通常在 CSS 代碼中我們都會(huì)使用這個(gè)，mandatory 的英文意思是強(qiáng)制性的，表示滾動(dòng)結(jié)束后，滾動(dòng)停止點(diǎn)一定會(huì)強(qiáng)制停在我們指定的地方

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

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

scroll-snap-type: both mandatory

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

CodePen Demo -- CSS Scroll Snap Both mandatory Demo

scroll-snap-align

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

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

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

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

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

再看看實(shí)際的 Demo ，將 scroll-snap-align 添加到滾動(dòng)子容器上：

scroll-snap-align: start

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

scroll-snap-align: center

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

scroll-snap-align: end

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

CodePen Demo -- CSS Scroll Snap Demo

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

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

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

scroll-margin / scroll-padding

上述的 scroll-snap-align 很好用，可以控制滾動(dòng)子元素與父容器的對(duì)齊方式。然而可選的值只有三個(gè)，有的時(shí)候我們希望進(jìn)行一些更精細(xì)的控制時(shí)，可以使用 scroll-margin 或者 scroll-padding

其中：

• scroll-padding 是作用于滾動(dòng)父容器，類(lèi)似于盒子的 padding

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

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

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

  
1
  
2
  
3
  ...
　　

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

li {
    scroll-snap-align: start;
}

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

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

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

• scroll-snap-type

• scroll-snap-align

• scroll-margin / scroll-padding

• scroll-snap-stop

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

實(shí)際應(yīng)用，漸進(jìn)增強(qiáng)

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

CodePen Demo -- full screen scroll

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

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

關(guān)于“css中sroll-snap-type屬性有什么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。