前言
滾動條是網站上不可缺少的元素，它們允許用戶在內容過多而無法一次性顯示在屏幕上的頁面中導航。默認的滾動條設計通常很簡陋，與網站的整體美觀度不協調。
幸運的是，CSS 提供了強大的功能，讓我們可以自定義滾動條的外觀，使其與網站的整體風格相匹配，同時提升用戶體驗。
自定義滾動條寬度的步驟
例如，以下代碼將滾動條的寬度設置為 10px：
::-webkit-scrollbar {width: 10px;}
自定義滾動條軌道的步驟
-
使用
::-webkit-scrollbar-track偽元素為所有滾動條軌道設置樣式。 -
設置
background-color屬性以定義軌道背景色。 -
添加
Border-radius屬性以給軌道添加圓角。
例如，以下代碼將軌道背景色設置為灰色并添加 10px 的圓角：
::-webkit-scrollbar-track {background-color: f5f5f5;border-radius: 10px;}
自定義滾動條滑塊的步驟
-
使用
::-webkit-scrollbar-thumb偽元素為所有滾動條滑塊設置樣式。 -
設置
background-color屬性以定義滑塊背景色。 -
同樣，還可以使用
border-radius屬性給滑塊添加圓角。
例如，以下代碼將滑塊背景色設置為黑色并添加 10px 的圓角：
::-webkit-scrollbar-thumb {background-color: 888;border-radius: 10px;}
自定義滾動條滑塊的懸停狀態
-
使用
::-webkit-scrollbar-thumb:hover偽元素為所有滾動條滑塊的懸停狀態設置樣式。 -
設置
background-color屬性以定義滑塊在懸停時的背景色。
例如，以下代碼將滑塊在懸停時的背景色設置為深灰色：
::-webkit-scrollbar-thumb:hover {background-color: 666;}
瀏覽器兼容性
需要注意的是，這些自定義滾動條樣式只適用于支持
::-webkit-scrollbar
偽元素的瀏覽器，例如 Chrome、Safari 和 Opera。對于其他瀏覽器，滾動條的外觀將使用默認的樣式。
