CSS 之我的 scrollbar 比較好看

還不錯用。

用法

不喜歡瀏覽器的預設滾軸嗎？告訴你一個好消息，其實可以用 CSS 改。

要設定滾軸樣式可以用 ::-webkit-scrollbar 相關的 pseudo-class 來做設定：

// 滾軸的容器
element::-webkit-scrollbar {
  // 垂直滾軸
  width: 8px;
  // 水平滾軸
  height: 8px;
  background-color: transparent;
}
// 滾軸的內容器
element::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}
// 用來滑的那一塊東東
element::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #555;
}

這邊附上我參加 Frontend Mentor 挑戰中的範例，有興趣的話可以參考一下。

不過你應該有注意到關鍵字： webkit

沒錯，這個方法只適用於 Webkit 瀏覽器（Chrome 和 Safari），因此要在其他瀏覽器上改的話得用 JavaScript 才有辦法。

想了解更多可以參考 這個網站