用CSS修改滾動條樣式
阿新 • • 發佈：2021-08-28
用::-webkit-scrollbar CSS偽類選擇器可以修改滾動條樣式，但僅限於webkit核心的瀏覽器，如Google和Edge瀏覽器就適用，而Firefox則不適用。
::-webkit-scrollbar還只是草案，而且該特性是非標準的，請儘量不要在生產環境中使用它！
以下效果均在Google上測試。
例子
HTML
<!DOCTYPE html>
<html>
<body>
<div class="container">
</div>
</body>
</html>
CSS
<style> .container { width: 1400px; height: 400px; background-color:#ccffcc; } /*設定寬度,軌道顏色*/ ::-webkit-scrollbar { width: 10px; height: 10px; background: #0e0c0c; /*可以設定軌道顏色*/ padding-right: 2px; } /*滾動條*/ ::-webkit-scrollbar-thumb { background: #b8e909; border-radius: 10px; } </style>
效果圖
繼續增加樣式：
/*增加懸停樣式*/
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
::-webkit-scrollbar-corner {
background: #ff0000; /*修改同時有垂直滾動條和水平滾動條時交匯的部分的樣式*/
}
效果
（注意右下角！）
/*滾動軌道樣式*/
::-webkit-scrollbar-track {
background: #ee8308;
border-radius: 2px;
}
補充與總結
::-webkit-scrollbar — 整個滾動條. ::-webkit-scrollbar-button — 滾動條上的按鈕 (上下箭頭). ::-webkit-scrollbar-thumb — 滾動條上的滾動滑塊. ::-webkit-scrollbar-track — 滾動條軌道. ::-webkit-scrollbar-track-piece — 滾動條沒有滑塊的軌道部分. ::-webkit-scrollbar-corner — 當同時有垂直滾動條和水平滾動條時交匯的部分. ::-webkit-resizer — 某些元素的corner部分的部分樣式(例:textarea的可拖動按鈕).
感謝閱讀！