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

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

Tips：本文截的一些 Gif 圖涉及容器滾動，效果不是很好，可以點進 Demo 里實際感受下。

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; }　　

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

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

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

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

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

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

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

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

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

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



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：

個人簡介

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

主目錄

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

總結(jié)

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

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