關於css中的那些scroll

摘要： 一、滾動軸scrollbar 說到css中的scroll，我們最先想到的應該是overflow:scroll。想到這個scroll之後，自然而然又想到了瀏覽器的滾動軸。說到瀏覽器的滾動軸，mac和window顯示各異，不同瀏覽器也顯示不同。早起也有一些js的解決方案。例如：jSc...

一、滾動軸scrollbar

說到css中的scroll，我們最先想到的應該是overflow:scroll。想到這個scroll之後，自然而然又想到了瀏覽器的滾動軸。說到瀏覽器的滾動軸，mac和window顯示各異，不同瀏覽器也顯示不同。早起也有一些js的解決方案。例如：ofollow,noindex" target="_blank">jScrollPane 、tinyscrollbar 等等。後來，CSS_selections" rel="nofollow,noindex" target="_blank">谷歌瀏覽器支援滾動軸的修改 ，我之前也有文章：https://www.haorooms.com/post/CSS_selections

控制滾動軸的7個偽元素分別是：

::-webkit-scrollbar：整個滾動條
::-webkit-scrollbar-button：滾動條上的按鈕（下下箭頭）
::-webkit-scrollbar-thumb：滾動條上的滾動滑塊
::-webkit-scrollbar-track：滾動條軌道
::-webkit-scrollbar-track-piece：滾動條沒有滑塊的軌道部分
::-webkit-scrollbar-corner：當同時有垂直和水平滾動條時交匯的部分
::-webkit-resizer：某些元素的交匯部分的部分樣式（類似textarea的可拖動按鈕）

具體案例可以看見我之前的文章。

二、scroll-behavior

有如下2個屬性

/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

有了這個屬性，可以讓我們的滾動更加平滑。

例如，原來的返回到頂部還要用js實現，現在僅僅用css就可以實現，程式碼如下：

<a href="#">返回頂部</a>

html, body { scroll-behavior:smooth; }

我們可以直接在html，或者body中新增如下：

html, body { scroll-behavior:smooth; }

類似把這段程式碼放到base.css中，凡是支援這個屬性的，都會自動加上平滑滾動的效果。

純css的tab切換，加上了scroll-behavior:smooth;可以實現動畫的效果，如下：

三、Scroll Snap

CSS Scroll Snap是CSS中一個獨立的模組，可以讓網頁容器滾動停止的時候，自動平滑定位到指定元素的指定位置，包含scroll-以及scroll-snap- 等諸多CSS屬性。

/* Keyword values */
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/* Optional mandatory | proximity*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

演示效果如下：