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