在网页开发中，默认的滚动条样式往往比较单一，和页面整体设计风格不匹配，通过CSS可以自定义滚动条的颜色、宽度等外观，让页面视觉效果更统一。不同浏览器内核的实现方式存在一定差异，下面分别介绍对应的实现方法。
webkit内核浏览器实现方案
Chrome、Edge、Safari等webkit内核的浏览器，支持使用::-webkit-scrollbar相关伪元素来定制滚动条样式，这是目前最常用的实现方式。
核心伪元素说明
::-webkit-scrollbar：整个滚动条的容器::-webkit-scrollbar-track：滚动条的轨道部分，也就是滚动条背景区域::-webkit-scrollbar-thumb：滚动条的滑块部分，也就是可以拖动的那个区域::-webkit-scrollbar-button：滚动条两端的按钮，默认通常不显示
自定义颜色示例代码
下面的代码可以实现整个页面的滚动条轨道为浅灰色，滑块为深蓝色，鼠标悬停在滑块上时变为更深的蓝色：
/* 整个滚动条 */
::-webkit-scrollbar {
width: 8px; /* 垂直滚动条宽度 */
height: 8px; /* 水平滚动条高度 */
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 4px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background-color: #2c6fbb;
border-radius: 4px;
}
/* 滑块悬停状态 */
::-webkit-scrollbar-thumb:hover {
background-color: #1a4f8b;
}
Firefox浏览器实现方案
Firefox浏览器不支持webkit的伪元素，需要使用CSS的scrollbar-color和scrollbar-width属性来实现滚动条颜色自定义，这两个属性属于CSS Scrollbars规范的内容。
属性说明
scrollbar-color：接收两个值，第一个是滑块颜色，第二个是轨道颜色scrollbar-width：设置滚动条的宽度，可选值为auto、thin、none
自定义颜色示例代码
下面的代码可以让Firefox下的滚动条滑块为深蓝色，轨道为浅灰色，滚动条宽度为thin：
/* 针对整个页面设置滚动条样式 */
html {
scrollbar-color: #2c6fbb #f1f1f1;
scrollbar-width: thin;
}
/* 也可以针对某个容器单独设置，比如id为content的div */
#content {
scrollbar-color: #2c6fbb #f1f1f1;
scrollbar-width: thin;
overflow-y: auto;
}
兼容性处理建议
如果需要同时兼容webkit内核浏览器和Firefox，可以把两种方案的代码写在一起，浏览器会自动识别自己支持的属性，忽略不支持的内容：
/* 通用兼容性写法 */
.custom-scrollbar {
/* Firefox支持的属性 */
scrollbar-color: #2c6fbb #f1f1f1;
scrollbar-width: thin;
/* 触发滚动的属性 */
overflow-y: auto;
}
/* webkit内核支持的伪元素 */
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background-color: #f1f1f1;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #2c6fbb;
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #1a4f8b;
}
需要注意的是，目前IE浏览器已经停止支持，所以上述方案已经可以覆盖绝大多数使用场景。如果页面有特殊需求需要兼容旧版浏览器，可能需要使用JavaScript模拟滚动条，不过这种方式实现成本较高，非必要情况下不建议使用。
CSS滚动条样式伪元素webkit_scrollbar前端样式修改时间：2026-06-14 01:30:30