仿mac滚动条样式的实现主要依赖CSS的::-webkit-scrollbar相关伪元素，这类伪元素仅支持webkit内核的浏览器，比如Chrome、Safari、Edge的新版本等，基本可以满足大部分用户的使用场景。
一、mac滚动条的核心特征
要实现仿mac滚动条，首先需要明确mac原生滚动条的核心特点：
- 默认状态下滚动条完全隐藏，不会占用页面布局空间
- 当用户滚动页面或者鼠标悬停在滚动区域时，滚动条才会显示
- 滚动条轨道背景透明，滑块宽度较窄，且带有圆角，颜色为半透明的灰色
- 滑块在 hover 状态下颜色会加深，点击拖动时颜色进一步加深
二、核心CSS属性说明
实现仿mac滚动条需要用到以下::-webkit-scrollbar相关的伪元素：
| 伪元素 | 作用说明 |
|---|---|
| ::-webkit-scrollbar | 整个滚动条的容器样式 |
| ::-webkit-scrollbar-track | 滚动条的轨道部分样式 |
| ::-webkit-scrollbar-thumb | 滚动条的滑块部分样式 |
| ::-webkit-scrollbar-button | 滚动条的上下/左右按钮样式，mac滚动条无按钮可隐藏 |
| ::-webkit-scrollbar-corner | 滚动条角落的样式，横向纵向滚动条交汇处 |
三、完整实现代码
以下是完整的仿mac滚动条样式代码，可以直接复制到项目中使用：
/* 整个滚动条容器 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
background: transparent;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
/* 滑块hover状态 */
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.4);
}
/* 滑块激活拖动状态 */
::-webkit-scrollbar-thumb:active {
background: rgba(0, 0, 0, 0.5);
}
/* 隐藏滚动条按钮 */
::-webkit-scrollbar-button {
display: none;
}
/* 横向纵向滚动条交汇处样式 */
::-webkit-scrollbar-corner {
background: transparent;
}
四、针对特定元素设置滚动条
如果只需要给某个特定元素设置仿mac滚动条，而不是全局生效，可以把伪元素前缀改为对应元素的选择器，比如给类名为custom-scroll的div设置滚动条：
/* 仅对custom-scroll类的元素生效 */
.custom-scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
background: transparent;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.4);
}
.custom-scroll::-webkit-scrollbar-button {
display: none;
}
对应的HTML结构如下：
<div class="custom-scroll" style="width: 300px; height: 200px; overflow: auto;">
<p>这里是内容区域，当内容高度超过容器高度时会出现滚动条</p>
<p>更多内容更多内容更多内容更多内容更多内容</p>
<p>更多内容更多内容更多内容更多内容更多内容</p>
<p>更多内容更多内容更多内容更多内容更多内容</p>
<p>更多内容更多内容更多内容更多内容更多内容</p>
</div>
五、兼容性说明
由于::-webkit-scrollbar相关伪元素是webkit内核私有的CSS属性，目前Firefox浏览器不支持该属性，Firefox有自己对应的滚动条样式设置方式，需要使用scrollbar-width和scrollbar-color属性，示例代码如下：
/* Firefox浏览器滚动条样式 */
.custom-scroll {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
如果需要兼容更多浏览器，可以同时使用webkit的伪元素和Firefox的专属属性，两者不会互相冲突，浏览器会自动识别支持的属性生效。
CSSHTML滚动条样式webkit_scrollbar修改时间：2026-07-11 18:48:13