自定义浏览器滚动条样式

自定义浏览器滚动条样式

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;
  }
}