仿Ant Design Vue风格自定义浏览器滚动条样式

仿Ant Design Vue风格自定义浏览器滚动条样式

问题原因

浏览器默认的滚动条样式很丑，无法满足需求，需要自定义滚动条样式，参考ant-design-vue的样式

css修改滚动相关属性可查阅官方文档

---

选择器介绍

1. ::webkit-scrollbar：滚动条
2. ::-webkit-scrollbar-track：滚动条的轨道
3. ::-webkit-scrollbar-track-piece：滚动条的轨道的顶部和底部
4. ::-webkit-scrollbar-corner：滚动条的角落
5. ::-webkit-scrollbar-button：滚动条的箭头按钮
6. ::-webkit-scrollbar-thumb：滚动条的滑块
7. ::-webkit-scrollbar-thumb:hover：滚动条的滑块hover

---

样式设置

示例

custom-scrollbar是自己的滚动元素的类名，根据实际修改

/* 设置滚动条宽度 */
.custom-scrollbar::webkit-scrollbar {width: 10px;
}/* 设置滑块样式 */
.custom-scrollbar::webkit-scrollbar-thumb {background: #888;border-radius: 4px;
}/* 滑块hover样式 */
.custom-scrollbar::webkit-scrollbar-thumb:hover {background: #636363;
}/* 箭头按钮 */
.custom-scrollbar::webkit-scrollbar-button {width: 10px;height: 20px;
}/* 向上箭头图标 */
.custom-scrollbar::webkit-scrollbar-button:vertical:decrement::before {background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b8b8b"><path d="M12 8l-6 6h12z"/></svg>');background-repeat: no-repeat;background-position: center;background-size: 20px;
}/* 向下箭头图标 */
.custom-scrollbar::webkit-scrollbar-button:vertical:decrement::before {background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238b8b8b"><path d="M12 16l6-6h-12z"/></svg>');background-repeat: no-repeat;background-position: center;background-size: 20px;
}

---

注意事项

1. 浏览器兼容性

• -webkit-前缀适用于Chrome/Safari/Edge
• Firefox需使用scrollbar-width和scrollbar-color
• IE不支持自定义样式

2. 常见问题排查

• 样式未生效时检查选择器命名一致性
• 确保容器内容溢出(overflow属性生效)
• 使用!important覆盖第三方库样式

3. 性能优化
   避免在滚动区域使用复杂的阴影和渐变效果，可能导致滚动卡顿。

---

效果对比建议

在Chrome浏览器中运行代码，分别注释掉自定义样式，观察默认样式与定制后的视觉效果差异。实际项目中建议配合UI设计稿调整色值参数。

如果需要具体项目的实现细节或遇到适配问题，欢迎在评论区交流讨论！