以前要設定網頁捲軸顏色的時候曾經有段時間可以使用 -ms-scrollbar-base-color
,不過這過當出只存在舊版 ie,現在這個屬性已經沒有用了,如果還有想要在網頁上自訂卷軸樣式的話,可以使用 ::-webkit-scrollbar
的屬性。
以下是常用的設定
.container::-webkit-scrollbar { width: 1em; } .container::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .container::-webkit-scrollbar-thumb { background-color: white; border: 1px solid slategrey; }
可以設定的屬性有以下這些:::-webkit-scrollbar
:捲軸本身,可以設定寬度
::-webkit-scrollbar-track
:捲軸空的地方,也可以說背景的顏色
::-webkit-scrollbar-thumb
:捲軸可以拉的部分
下面這些在 Mac 上效果看不大出來,windows 的可以試試看
::-webkit-scrollbar-button
:捲軸上的按鈕,不過 Mac 上的瀏覽器沒有
::-webkit-scrollbar-track-piece
:寫了會覆蓋掉 ::-webkit-scrollbar-track
::-webkit-scrollbar-corner
:看說明似乎指的是捲動地區底部的角落
::-webkit-resizer:如果區塊可以 resize,resize 部分的上邊緣
看一下效果:
不過這寫法主要是在 webkit 上的瀏覽器可以作用,如果要在 firefox 上可以改變樣式的話可以這樣寫:
scrollbar-width: thin; /* "auto" or "thin" */ scrollbar-color: blue orange; /* scroll thumb and track */
但能修改的部分就比較少一點,給有需要的人參考。