滾動貼合特效實現 CSS Snap Scroll

網頁開發發展到現在，特效是越來越多，我們經�？梢钥吹接械木W站上邊的內容，它們會在鼠標滾動的時候自動貼合到瀏覽器的頂部或者底部，以前實現這種特效使用的是 JavaScript，現在我們可以使用 CSS 原生屬性來設置，并且使用這種方式無論在桌面端還是移動端瀏覽器上，都能達到操作系統級的滾動貼合效果。

設置滾動貼合

設置滾動貼合需要使用到兩個屬性：

• 給滾動容器設置 scroll-snap-type，滾動貼合的方向和方式。

• 給滾動的內容設置 scroll-snap-align，滾動貼合的對齊方式。

我們來看一下它們的用法，假設我們有 4 屏的內容需要進行垂直滾動貼合。我們用 main 元素表示滾動的容器，4 個 section 表示要滾動貼合的內容，為了突出重點，我們只看核心代碼：

<main>    <section>頁面內容1</section>    <section>頁面內容2</section>    <section>頁面內容3</section>    <section>頁面內容4</section></main>

每個 section 都設置為占滿全屏：

section {  width: 100vw;  height: 100vh;}

然后把 main 元素的高度設置為 100vh，overflow 為 scroll，來把滾動條設置到 main 元素上：

main {  overflow: scroll;  height: 100vh;}

之后是關鍵部分，第一步，我們給 main 元素設置 scroll-snap-type 屬性：

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

scroll-snap-type 需要兩個值，第一個值為滾動貼合的方向，y 表示縱向滾動貼合，第二個值為貼合方式，mandatory 表示強制滾動，用戶只要一滾動鼠標，下一屏內容就直接滾動上來進行貼合。 第二步，我們需要指定子元素的貼合對齊方式，使用 scroll-snap-align 屬性，例如這里把它設置為 start：

section {  scroll-snap-align: start;}

下一屏的內容會直接貼合到 main 元素頂部，這樣滾動貼合就實現了。

貼合結束對齊

如果我們把 section 的高度加長，再把 scroll-snap-align 屬性設置為 end，那么滾動時，下一屏內容的底部就會貼合到 main 元素的底部，例如：

section {  height: 150vh;  scroll-snap-align: end;}

貼合居中對齊

如果把 scroll-snap-align 設置為 center，那么下一屏的內容會和 main 元素垂直居中對齊：

section {  height: 150vh;  scroll-snap-align: center;}

水平滾動貼合

對于水平滾動貼合，它和垂直方向的設置是一樣的，只需要把滾動容器中的 scroll-snap-type 中的 y 改成 x。這里我們把容器布局做一些調整，讓它有水平滾動條：

main {  display: flex;  scroll-snap-type: x mandatory;  overflow: scroll;  height: 100vh;  width: 100vw;}section {  width: 100vw;  height: 100vh;  flex-shrink: 0;  scroll-snap-align: start;}

這樣就能實現水平方向的滾動貼合了。

近似貼合

使用 mandatory 強制貼合的方式適合內容尺寸較小的情況，如果有的元素內容非常長，那么在滾動的時候會直接滑動到下一屏，導致不在屏幕上的內容很快就會滑過，這個時候我們可以使用 proximity 屬性，讓元素滾動到離貼合點小于一定距離的時候再貼合：

main {  scroll-snap-type: y mandatory;}/* 非常長的內容 */section:nth-child(3) {  height: 250vh;}

這個距離，是瀏覽器自己規定的。

貼合間距

在貼合的時候，我們還可以給容器設置間距，讓貼合點偏移一些距離。假如容器中有一個 sticky 粘滯的頭部，占據了一定的空間：

<main>  <h1>H1標題</h1>  <section>頁面內容1</section>  <section>頁面內容2</section>  <section>頁面內容3</section>  <section>頁面內容4</section></main>h1 { height: 80px; position: sticky; top: 0; }

如果直接設置滾動貼合，那么元素會貼合到 main 元素的頂部，這樣會有一部分內容被粘滯頭部覆蓋：

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

這種情況我們可以給滾動容器， 也就是 main 元素，設置 scroll-padding，大小跟粘滯頭部的高度一致，這樣就能在貼合的時候，與 main 元素有一定的間距，從而把頭部的空間留出來：

main {  scroll-snap-type: y mandatory;  scroll-padding: 80px;}

scroll-padding 和 padding 屬性的取值方式是一樣的。

非全屏貼合

滾動貼合并不僅僅可以用于全屏滾動，也可以用于 ul 這種小的列表組件中：

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li>  <li>8</li></ul>

CSS：

ul {  width: 50%;  height: 400px;  overflow: scroll;  scroll-snap-type: y mandatory;}li {  scroll-snap-align: start;}

兼容性

scroll snap 的兼容性可以參考這個表格：

小結

好了，這個就是使用 CSS 設置滾動貼合的方式，共兩步：

• 第一步，給滾動容器設置 scroll-snap-type，第一個值為方向，可以取 x 或 y，第二個值為方式，可以取 mandatory 或 proximity。

• 第二步，給子元素設置 scroll-snap-align，取值可以是 start、center 和 end。

轉載：https://zxuqian.cn/docs/videos/css/css-scroll-snap/