修改谷歌或火狐浏览器滚动条scrollbar样式

Blink 或 WebKit内核的浏览器

说明

只有基于 Blink 或 WebKit 的浏览器才支持这种修改方式, 下图绿框为可用的浏览器版本

这些浏览器中的滚动条本身是一个伪元素, 但可以通过继承的方式单独用在全局中, 而不在前面添加CSS选择器. 如下所示

CSS代码

<style>

  ::-webkit-scrollbar {

    width: 5px;

  }


  ::-webkit-scrollbar-thumb {

    width: 5px;

    height: 70px;

    background-color: #d8d8d8;

    border-radius: 10px;

  }

</style>

 

用法

所有的滚动条样式都必须基于::-webkit-scrollbar 才能实现, 因此, 要修改滚动条样式, 必须先定义::-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;

}

 

谷歌浏览器在121版本更新了规则, 如果使用了原生 scrollbar-color 或 scrollbar-width属性, 会覆盖定义的webkit-scrollbar 样式, 要避免这一结果, 可以使用 @support 规则排除掉支持webkit的浏览器, 如下所示

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

 

 

火狐浏览器

说明

火狐浏览器是基于Gecko内核实现的, 所以用法跟WebKit内核的不同. 支持这种用法的浏览器如下

用法

根据MDN说明, 目前可以使用的属性有两种

css代码

.myDiv {

  /* 修改滚动条的颜色, 可以同时应用两种颜色, 前者定义滑块的, 后者定义轨道的 */

  scrollbar-color: rebeccapurple green;




  /* 修改滚动条宽度, 可用值为

    auto  系统默认的滚动条宽度

    thin  系统提供的瘦滚动条宽度，或者比默认滚动条宽度更窄的宽度

    none  不显示滚动条，但是该元素依然可以滚动

  */

  scrollbar-width: thin;

}

 

 

参考文章: https://blog.csdn.net/SeriousLose/article/details/116709298