[css] 說(shuō)說(shuō)sroll-snap-type屬性的運(yùn)用場(chǎng)景有哪些？相關(guān)聯(lián)的屬性還有哪些？

使用 sroll-snap-type 優(yōu)化滾動(dòng)
根據(jù) CSS Scroll Snap Module Level 1 規(guī)范，CSS 新增了一批能夠控制滾動(dòng)的屬性，讓滾動(dòng)能夠在僅僅通過(guò) CSS 的控制下，得到許多原本需要 JS 腳本介入才能實(shí)現(xiàn)的美好交互。

Tips：本文截的一些 Gif 圖涉及容器滾動(dòng)，效果不是很好，可以點(diǎn)進(jìn) Demo 里實(shí)際感受下。

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)，可以這樣寫：

<ul><li>1</li><li>2</li><li>3</li> </ul>ul {scroll-snap-type: x mandatory; }li {scroll-snap-align: center; }　　

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

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

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)行捕捉，也是可以的：

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

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

{
scroll-snap-align: start | center | end;
}
什么意思呢，看看示意圖：



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

其中：

scroll-padding 是作用于滾動(dòng)父容器，類似于盒子的 padding
scroll-margin 是作用于滾動(dòng)子元素，每個(gè)子元素的 scroll-margin 可以設(shè)置為不一樣的值，類似于盒子的 margin
舉個(gè)例子，在豎向滾動(dòng)下，給滾動(dòng)父容器添加一個(gè) scroll-padding-top: 30px 等同于給每個(gè)子元素添加 ``scroll-margin-top: 30px`：

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

個(gè)人簡(jiǎn)介

我是歌謠，歡迎和大家一起交流前后端知識(shí)。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[css] 说说sroll-snap-type属性的运用场景有哪些？相关联的属性还有哪些？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。