自定義瀏覽器捲軸樣式

闲云-野鹤發表於2024-09-18
瀏覽器

自定義瀏覽器捲軸樣式

Webkit核心的瀏覽器，可以透過-webkit-scrollbar等屬性進行重置

/*設定尺寸*/
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* 捲軸兩端的按鈕 */
::-webkit-scrollbar-button {
  background-color:red;
  width: 100px;
  height: 10px;
}

/* 捲軸的滑塊部分 */

::-webkit-scrollbar-thumb {
  background: #2d3748;
  border: 0px none #ffffff;
  border-radius: 50px;
}

/* 捲軸滑塊的hover樣式*/

::-webkit-scrollbar-thumb:hover {
  background: #2b6cb0;
}

/* 捲軸滑塊的啟用樣式*/

::-webkit-scrollbar-thumb:active {
  background: #000000;

}

/* 捲軸的外層軌道*/

::-webkit-scrollbar-track {
  background: #1a202c;
  border: 0px none #ffffff;
  border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
  background: #666666;

}

::-webkit-scrollbar-track:active {
  background: #333333;
}

/* 捲軸的外層軌道-可見部分*/

::-webkit-scrollbar-track-piece{
  background: #a09f9f;
}

/* 捲軸邊角*/

::-webkit-scrollbar-corner {
  background: transparent;
}

/* 捲軸右下角拖動塊*/

::-webkit-resizer{
  background-color: transparent;
}

火狐瀏覽器

火狐瀏覽器基於Gecko核心，可以透過下面屬性設定


html {
  /* 修改捲軸的顏色, 可以同時應用兩種顏色, 前者定義滑塊的, 後者定義軌道的 */
  scrollbar-color: rebeccapurple green;
  /* 修改捲軸寬度, 可用值為
    auto  系統預設的捲軸寬度
    thin  系統提供的瘦捲軸寬度，或者比預設捲軸寬度更窄的寬度
    none  不顯示捲軸，但是該元素依然可以滾動
  */
  scrollbar-width: thin;

}

谷歌瀏覽器在121版本更新了規則, 如果使用了原生 scrollbar-color 或 scrollbar-width屬性, 會覆蓋定義的webkit-scrollbar 樣式, 要避免這一結果, 可以使用 @support 規則排除掉支援webkit的瀏覽器, 如下所示

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: blue transparent;
    scrollbar-width: thin;
  }
}

相關文章