如何創建：自定義滾動條

學習如何使用 CSS 創建自定義滾動條。

如何創建自定義滾動條

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 瀏覽器，您可以使用以下偽元素來自定義瀏覽器的滾動條：