如何做 - 自定義捲軸
瞭解如何使用 CSS 建立自定義捲軸。
自定義捲軸
注意： Firefox 或 79 版本之前的 Edge 不支援自定義捲軸。
如何建立自定義捲軸
Chrome、Edge、Safari 和 Opera 支援非標準的 ::-webkit-scrollbar 偽元素，它允許我們修改瀏覽器捲軸的外觀。
以下示例建立了一個細的（10px 寬）捲軸，其軌道/條顏色為灰色，滑塊顏色為深灰色（#888）
示例
/* 寬度 */
::-webkit-scrollbar {
width: 10px;
}
/* 軌道 */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* 滑塊 */
::-webkit-scrollbar-thumb {
background: #888;
}
/* 懸停時的滑塊 */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
自己動手試一試 »
此示例建立了一個帶盒陰影的捲軸
示例
/* 寬度 */
::-webkit-scrollbar {
width: 20px;
}
/* 軌道 */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* 滑塊 */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
自己動手試一試 »
捲軸選擇器
對於 webkit 瀏覽器，您可以使用以下偽元素來自定義瀏覽器的捲軸
::-webkit-scrollbar— 捲軸本身。::-webkit-scrollbar-button— 捲軸上的按鈕（指向上和下的箭頭）。::-webkit-scrollbar-thumb— 可拖動的滾動滑塊。::-webkit-scrollbar-track— 捲軸的軌道（進度條）。::-webkit-scrollbar-track-piece— 未被滑塊覆蓋的軌道（進度條）部分。::-webkit-scrollbar-corner— 捲軸的底角，水平和垂直捲軸交匯處。::-webkit-resizer— 出現在某些元素底角的可拖動調整大小的控制代碼。
