網頁設計中，自定義瀏覽器滾動條是提升用戶體驗和美化界面的一項重要技巧。通過CSS的偽元素和屬性，我們能夠輕松地調整滾動條的樣式。以下是一些簡單的步驟，教你如何設置瀏覽器滾動條。

滾動條

首先，我們使用::-webkit-scrollbar偽元素來選擇Webkit內核瀏覽器（如Chrome、Safari）的滾動條。接著，我們通過width屬性調整滾動條的寬度，使其更符合設計需求。這一步驟非常關鍵，因為寬度的調整可以在一定程度上影響用戶的感知和交互。

/* 設置滾動條的寬度 */
::-webkit-scrollbar {
   width: 5px;
}

軌道

其次，使用::-webkit-scrollbar-track選擇滾動條的軌道部分，通過background屬性為軌道設置背景顏色。這有助于使滾動條在頁面中更加協調和統一。

/* 滾動條軌道的樣式 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

手柄

接下來，使用::-webkit-scrollbar-thumb選擇滾動條的拖動手柄部分，通過background屬性設置手柄的背景顏色。這一步可以為滾動條增添一些獨特的個性，使其與整體設計風格更加契合。

/* 滾動條手柄的樣式 */
::-webkit-scrollbar-thumb {
  background: #bec4c4;
}

手柄懸停

最后，通過::-webkit-scrollbar-thumb:hover選擇手柄在懸停狀態時的樣式，通過調整background屬性，為用戶提供視覺反饋，增強交互體驗。

::-webkit-scrollbar-thumb:hover {
   background: #555;
}

通過以上步驟，你可以輕松定制出一個獨特且符合網站設計的瀏覽器滾動條。這種個性化的設計不僅能夠提升用戶對網站的印象，還能夠改善用戶在頁面上的滾動體驗。在實際應用中，根據網站的整體風格和需求，你還可以進一步調整滾動條的其他樣式屬性，以實現更加復雜和豐富的效果。

用場景

::-webkit-scrollbar 只支持WebKit的瀏覽器 (谷歌Chrome, 蘋果Safari)可以使用。

全局樣式

* {
  scrollbar-width: thin;
  // auto -瀏覽器默認滾動條寬度
  // thin -設置比默認滾動條更窄的寬度
  // none -隱藏滾動條，但是元素還可以滾動
  // **px -直接設置滾動條的寬度
}

// 垂直滾動條和水平滾動條相交的部分
::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
}

// 整個滾動條
::-webkit-scrollbar {
  width: 5px; // 寬度
  height: 5px; // 高度
  background-color: #a7b1c2; // 顏色
}

// 滾動條上的滾動滑塊。
::-webkit-scrollbar-thumb {
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}

// 滾動條上的按鈕（上下箭頭）。
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

// 滾動條軌道
::-webkit-scrollbar-track {
  display: none;
}

// 滾動條沒有滑塊的軌道部分。
::-webkit-scrollbar-track-piece {
  display: none;
}

// 右下角拖動塊（如：textarea的可拖動按鈕）
::-webkit-resizer {
  background: #991d28;
}

局部樣式