在开始说滚动条之前，先介绍下当前主流的浏览器和内核。
Blink 内核
Blink 内核是从 WebKit 内核分支而来，继承并优化了许多特性。它采用了多进程架构，每个标签页、插件等都可以在独立的进程中运行，这使得浏览器在处理多个复杂页面时，一个页面的崩溃或卡顿不会影响其他页面，大大提高了浏览器的整体性能和稳定性。
代表浏览器：Google Chrome、Microsoft Edge（新版）、Opera、Brave 等。
Gecko 内核
Gecko 内核以遵循网页标准而著称，它积极支持 W3C 等组织制定的各种标准，对于开发者来说，使用标准的 HTML、CSS 和 JavaScript 代码在 Firefox 上能得到很好的兼容和呈现。
代表浏览器：Mozilla Firefox。
WebKit 内核
webkit内核在资源占用方面相对较少，启动速度和页面加载速度较快，尤其适合在移动设备等资源有限的环境中使用。
代表浏览器：Safari（苹果公司的浏览器）、一些移动端浏览器（如 iOS 系统自带浏览器）。
正文开始
<div class="box"><div class="demo1">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></div><style>.box {width: 400px;margin: 200px auto;border: 1px solid;}.demo1 {overflow: auto;}</style>先看下默认效果。这里使用的edge浏览器
修改滚动条样式
/*定义滚动条整体样式 WebKit 内核浏览器中，滚动条样式的设置是基于一个层级结构的::-webkit-scrollbar 是整个滚动条的顶级选择器，它代表滚动条的整体部分，而 ::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb 是滚动条的子部分。 不定义滚动条整体样式的话，定义滚动条轨道，圆角等其他样式的时候就不生效了*/::-webkit-scrollbar {width: 0px; }/* 定义 轨道背景颜色 */::-webkit-scrollbar-track {background: #8d8c8c; }::-webkit-scrollbar-thumb {background: #da3d3d; /* 滑块背景颜色 */border-radius: 0px; /* 滑块圆角 */}/* 定义滚动条滑块悬停时的样式 */::-webkit-scrollbar-thumb:hover {background: #1fbb46; }效果
这里在edge浏览器中样式都生效了，但是在火狐浏览器中打开的时候，样式没有生效。
在火狐浏览器中，主要通过scrollbar-width属性和scrollbar-color来控制滚动条样式的
.demo1 {scrollbar-width: 20px; /* 可选值：auto | thin | none */scrollbar-color: red yellow; /* 第一个值是滑块颜色，第二个值是轨道颜色 */}效果
使用@supports来判断当前浏览器的内核
/* 检测 WebKit/Blink 内核 */@supports (-webkit-appearance: none) {/* 这里放置仅在 WebKit/Blink 内核浏览器中生效的样式 */.demo1 {background-color: lightblue;}}@supports (-moz-appearance: none) {/* 这里放置仅在 Gecko 内核浏览器中生效的样式 */.demo1 {background-color: lightgreen;}}效果
end
如有误欢迎指正