在开始说滚动条之前，先介绍下当前主流的浏览器和内核。

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浏览器

 修改滚动条样式

css">     /*定义滚动条整体样式   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来控制滚动条样式的

css">        .demo1 {scrollbar-width: 20px; /* 可选值：auto | thin | none */scrollbar-color: red yellow; /* 第一个值是滑块颜色，第二个值是轨道颜色 */}

 效果

使用@supports来判断当前浏览器的内核

css">   /* 检测 WebKit/Blink 内核 */@supports (-webkit-appearance: none) {/* 这里放置仅在 WebKit/Blink 内核浏览器中生效的样式 */.demo1 {background-color: lightblue;}}@supports (-moz-appearance: none) {/* 这里放置仅在 Gecko 内核浏览器中生效的样式 */.demo1 {background-color: lightgreen;}}

效果

 end

如有误欢迎指正