引言

滾動條是我們經常會遇到的 UI 元素，它允許用戶在超出容器范圍的內容中進行滾動。默認的滾動條樣式往往缺乏個性化和美觀度。通過使用自定義 CSS，我們可以創建具有獨特外觀和功能的滾動條，從而提升用戶體驗。

自定義滾動條軌道

滾動條軌道是滾動條中容納滑塊的區域。我們可以通過以下 CSS 屬性自定義它的外觀：

• -webkit-scrollbar { width: ; height: ; background-color: ; }

例如，要將滾動條軌道設置為 10px 寬、10px 高并帶有灰色背景，我們可以使用以下代碼：

::-webkit-scrollbar {width: 10px;height: 10px;background-color: ccc;
}

自定義滾動條滑塊

滾動條滑塊是用戶可以拖動以在內容中滾動的部分。我們可以通過以下 CSS 屬性自定義它的外觀：

• -webkit-scrollbar-thumb { background-color: ; Border-radius: ; }

例如，要將滾動條滑塊設置為藍色并帶有圓角，我們可以使用以下代碼：

::-webkit-scrollbar-thumb {background-color: 007bff;border-radius: 5px;
}

自定義滾動條懸停和活動狀態

我們還可以通過 CSS 偽類自定義滾動條滑塊在懸停和活動狀態下的外觀：

• -webkit-scrollbar-thumb:hover { background-color: ; }
• -webkit-scrollbar-thumb:active { background-color: ; }

例如，要使滾動條滑塊在懸停時變為深藍色，在活動時變為黑色，我們可以使用以下代碼：

::-webkit-scrollbar-thumb:hover {background-color: 0056b3;
}::-webkit-scrollbar-thumb:active {background-color: 000;
}

自定義滾動條軌道活動狀態

除了滾動條滑塊之外，我們還可以自定義滾動條軌道在活動狀態下的外觀：

• -webkit-scrollbar-track:active { background-color: ; }

例如，要使滾動條軌道在活動時變為淺灰色，我們可以使用以下代碼：

::-webkit-scrollbar-track:active {background-color: e0e0e0;
}

示例

下面是一個使用上面討論的 CSS 屬性創建的自定義滾動條示例：

::-webkit-scrollbar {width: 10px;height: 10px;background-color: ccc;
}::-webkit-scrollbar-thumb {background-color: 007bff;border-radius: 5px;
}::-webkit-scrollbar-thumb:hover {background-color: 0056b3;
}::-webkit-scrollbar-thumb:active {background-color: 000;
}::-webkit-scrollbar-track:active {background-color: e0e0e0;
}

此示例將創建具有藍色滑塊、灰色軌道的滾動條，滑塊在懸停時會變為深藍色，在活動時會變為黑色。軌道在活動時會變為淺灰色。

瀏覽器兼容性

請注意，自定義 CSS 滾動條的 CSS 屬性僅在 Webkit 瀏覽器（例如 Chrome 和 Safari）中受支持。其他瀏覽器可能不會呈現自定義的滾動條。

總結

通過使用自定義 CSS，我們可以輕松創建具有獨特外觀和功能的滾動條。這使我們能夠提升用戶體驗，并使我們的網站或應用程序更具吸引力和個性化。

---

---

相關標簽： 自定義、 滾動條、 打造個性化滾動體驗、 CSS、 自定義css樣式、

上一篇：掌握CSS滾動條優化用戶界面交互css滾動

下一篇：FindWindowExA函數的進階用法尋找隱藏窗口