chrome/edge 支持用 ::-webkit-scrollbar-thumb 的 background-image 设置滚动条滑块纹理，需配合 ::-webkit-scrollbar 和 ::-webkit-scrollbar-track 声明；推荐内联 svg（url 编码）、小尺寸（4×4 px）、background-size 控制重复；firefox 不支持，移动端兼容性差，建议降级为纯色或渐变。
Chrome / Edge 中用 ::-webkit-scrollbar-thumb 设置背景图片
滚动条滑块（thumb）支持 background-image，但仅限 WebKit 内核浏览器（Chrome、Edge、Safari）。Firefox 不支持该伪元素，无法实现。
关键点：
-
::-webkit-scrollbar-thumb必须配合::-webkit-scrollbar和::-webkit-scrollbar-track一起声明，否则部分版本 Chrome 会忽略样式 - 图片需足够小（如 4×4 px），否则在窄滑块上拉伸失真；推荐用
background-size: 4px 4px控制重复密度 - 避免使用大 PNG 或带透明通道的图——滑块默认有圆角和阴影，叠加后容易显得脏乱
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #f0f0f0;
}
::-webkit-scrollbar-thumb {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath d='M0 0h4v4H0z' fill='%23ccc'/%3E%3C/svg%3E");
background-size: 4px 4px;
border-radius: 6px;
}
SVG 内联编码比外部图片更可靠
用 url("data:image/svg+xml,...") 直接嵌入 SVG，能避开跨域、加载失败、路径错误等问题。Base64 编码反而易出错，且体积更大。
注意 URL 编码细节：
→ <code>%3C，>→%3E，#→%23，空格 →%20- XML 命名空间、
viewBox、fill都要保留，否则渲染为空白 - 如果想加斜线纹理，用
<pattern></pattern>+<line></line>更轻量，比位图灵活
Firefox 完全不支持自定义滑块纹理
Firefox 使用系统原生滚动条，::-moz-* 伪类只支持极简样式（如 background-color、border），不接受 background-image 或 mask。
如果你必须统一外观：
- 放弃原生滚动条，用 JavaScript 库（如
simplebar或overlay-scrollbars）接管滚动逻辑 - 这类库会创建 DOM 替代元素，可完全控制 thumb 的 HTML 结构与 CSS，包括
background-image、transform、甚至filter - 代价是增加 JS 体积、可能干扰
scrollIntoView行为、需要手动适配触摸设备
移动端 Safari 和安卓 Chrome 的兼容性陷阱
iOS Safari 自 iOS 16.4 起支持 ::-webkit-scrollbar，但仅限于桌面模式（@media (hover: hover)）；普通竖屏下仍强制使用原生滚动条，样式无效。
安卓 Chrome 大多支持，但部分厂商定制系统（如华为 EMUI、小米 MIUI）会禁用或覆盖 WebKit 滚动条样式。
所以：
- 别在移动端依赖图片纹理——用户大概率看不到
- 若设计稿强要求，优先降级为纯色 + 微渐变（
background: linear-gradient(...)），它在所有支持伪元素的环境下都稳定 - 用
@supports selector(::-webkit-scrollbar)包裹样式，避免污染不支持环境的 CSS 解析
实际项目里，最常被忽略的是：纹理图片没做深色模式适配，导致在暗色背景下完全不可见；或者用了高对比度的复杂图案，让滑块在快速拖拽时产生视觉残留干扰。这些没法靠“加个 !important”解决，得从纹理密度和明度范围重新设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
