自定义浏览器滚动条样式
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;
}
}