在現代網頁中，如果內容高於瀏覽器或是元素區塊的高度，會出現滾動條方便瀏覽，一般瀏覽器預設為灰色的樣式。

但有時候網站的風格，跟預設的滾動條樣式，與網站的整體設計風格產生不協調，為了解決這個問題，我們可以利用 ::-webkit-scrollbar 來來自訂滾動條外觀，從而提升網站的視覺一致性和用戶體驗。

💠 ::-webkit-scrollbar 基本用法

語法

選擇器::-webkit-scrollbar {
  屬性名: 屬性值; 
}

選擇器::-webkit-scrollbar-thumb {
  屬性名: 屬性值; 
}

• ::-webkit-scrollbar：控制整個滾動條的樣式
• ::-webkit-scrollbar-thumb：控制滑動條的樣式

範例

一起試試：［CODEPEN］

以下 HTML 為範例模板

<div class="box scrollbar">
  <!--省略文字-->
</div>

.box {
  height: 200px;
  width: 90%;
  margin: 30px auto;
  padding: 20px;
  overflow: auto;
  border: 2px solid #d1d1d1;
}

範例一：更改滾動條顏色

.scrollbar::-webkit-scrollbar {
  background-color: #007;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bada55;
}

範例二：隱藏滾動條

直接將 display: none 應用於 ::-webkit-scrollbar 可以隱藏滾動條，但仍然允許滾動。

.scrollbar::-webkit-scrollbar {
  display: none;
}

範例三：調整滾動條寬度

可以將滾動條變得更細，以與網頁的設計風格更加協調。

.scrollbar::-webkit-scrollbar {
  background-color: #007;
  width: 6px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bada55;
}

瀏覽器相容性

你可能會發現 ::-webkit-scrollbar 依然有個前綴 -webkit-，這代表功能還並非為標準的 CSS 規範，因此不同的瀏覽器引擎採用了各自的方式來提供類似的功能，-webkit- 前綴允許 WebKit 瀏覽器（如 Safari 和 Chrome）支援這些功能，但對於其他瀏覽器（如 Firefox）無法支援

那 Firefox 就不管了嗎？

當然不行～我們可以使用 scrollbar-color CSS 屬性

💠 scrollbar-color 基本用法

語法

選擇器 {
	scrollbar-color: 滑動條顏色 整個滾動條區塊顏色;
}

範例

一起試試：［CODEPEN］

以下 HTML 為範例模板

<div class="box scrollbar">
  <!--省略文字-->
</div>

.box {
  height: 200px;
  width: 90%;
  margin: 30px auto;
  padding: 20px;
  overflow: auto;
  border: 2px solid #d1d1d1;
}

範例一：滾動條顏色修改

.scrollbar {
  scrollbar-color: #bada55 #007;
}

範例二：隱藏滾動條

通過將滾動條顏色設置為透明來隱藏它，這樣用戶仍然可以滾動內容。

.scrollbar {
  scrollbar-color:  transparent transparent;
}

範例三：調整滾動條寬度

使用 scrollbar-width 來改變滾動條的寬度，如將其設為 thin 可以縮小滾動條。

.scrollbar {
  scrollbar-color: #bada55 #007;
  scrollbar-width: thin;
}

瀏覽器相容性

太好了~！那我們就直接使用 scrollbar-color 來設定滾動條樣式就好了！

如果你是這樣想就大錯特錯了！

我們可以看到 scrollbar-color 對於主流瀏覽器的支援度，目前對於 Safari 是不支援的

那這樣我們要換放棄 Safari 了嗎？

作為一個前端開發者是不會讓這種事情發生的！

還記得前面講到的 ::-webkit-scrollbar 是支援 Safari 的嗎？我們可以將兩種寫法都加上，確保樣式在任何主流瀏覽器皆可以出現

💠 滾動條相容樣式

一起試試：［CODEPEN］

由於 ::-webkit-scrollbar 和 scrollbar-color 屬於不同的瀏覽器支援範疇，建議在設計時將這兩者結合使用。

.scrollbar {
  scrollbar-color: #bada55 #007;
}

.scrollbar::-webkit-scrollbar {
  background-color: #007;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: #bada55;
}

要確保最大化的相容性，你可以透過 @supports，針對不同瀏覽器的能力進行檢測，避免讓瀏覽器處理不支援的樣式，減少樣式處理的複雜度。

@supports (scrollbar-color: auto) {
  .scrollbar {
    scrollbar-color: #bada55 #007;
  }
}

@supports selector(::-webkit-scrollbar) {
  .scrollbar::-webkit-scrollbar {
    background-color: #007;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background-color: #bada55;
  }
}

💠 總結

常常遇到網站的風格跟滾動條樣式非常的不搭，看起來就會很突兀，但通過使用 ::-webkit-scrollbar 與 scrollbar-color 可以調整滾動條的外觀，對於網站是非常的實用！無論是在 Chrome、Safari 還是 Firefox 等主流瀏覽器中，都能達到一致的效果。

Reference

• MDN ::-webkit-scrollbar
• MDN scrollbar-color

本文將同步更新至 Lala Code