介紹8個和滾動相關的CSS屬性

介紹8個和滾動相關的CSS屬性

Scroll Snap

Scroll Snap 是一個 CSS 獨立子產品，可以讓滾動元素停止的時候有吸附效果，非常容易實作類似 Swiper 這種互動，甚至是那種可以滑來滑去的頁籤互動效果。

scroll-behavior

scroll-behavior 可以讓滾動容器出現錨點定位，或者 JS 設定 scrollLeft/scrollTop 滾動距離時候表現為平滑定位。

overscroll-behavior

overscroll-behavior 屬性可以讓滾動嵌套時父滾動不觸發，比方說彈框中的滾動滾到底部的時候，背後的頁面會紋絲不動。

overflow-anchor

overflow-anchor 屬性我之前也介紹過，詳見“CSS overflow-anchor屬性與滾動錨定”一文。

這個屬性作用是讓頁面圖檔動态加載了很多内容的時候，目前視區的内容保持不變。

例如看漫畫，上面有些漫畫圖檔還沒加載好，你已經看到後面，此時，如果上面的圖檔加載正常，高度撐高，則目前你看的漫畫位置會紋絲不動，不會被推下來。

這就是 overflow-anchor 屬性的作用。

scrollbar-width

scrollbar-width 可以用來自定義滾動條的寬度，不過不能指定具體數值，隻能是正常（17px），細（8px）和沒有，文法如下：

scrollbar-width: auto | thin | none;

主要針對 windows 系統下的 Firefox 浏覽器，因為 Mac OS X 或iOS 作業系統滾動條預設就不占據寬度，沒必要使用這個，而 Chrome 浏覽器可以使用 -webkit-scrollbar 僞元素自定義滾動條的寬度，用不到 scrollbar-width 設定。

scrollbar-color

scrollbar-color 可以設定滾動條的顔色，和 scrollbar-width 一樣，僅 Firefox 浏覽器支援，文法如下：

scrollbar-color: auto | 滑杆顔色 軌道顔色;

和 scrollbar-width 屬性一起，填補了 Firefox 浏覽器滾動條樣式無法自定義的空白。

例如：

.container {

    scrollbar-width: thin;

    scrollbar-color: #0009 transparent;