不能单独美化。overflow-x 和 overflow-y 的滚动条共用同一套 ::-webkit-scrollbar 样式，因该伪元素绑定容器滚动上下文而非方向；firefox 完全不支持，跨浏览器需 js 库模拟。
overflow-x 和 overflow-y 的滚动条能单独美化吗
不能直接单独美化。CSS 的 ::-webkit-scrollbar 伪元素作用于整个滚动容器，不区分 x 或 y 方向；设置 overflow-x: auto 但 overflow-y: hidden 时，即使只出现水平滚动条，::-webkit-scrollbar 依然控制的是「该容器下可能出现的任意方向滚动条」，无法按方向写两套样式。
为什么 overflow-x: scroll + overflow-y: hidden 时竖直滚动条样式仍生效
因为浏览器（Chrome/Safari/Edge）在渲染时，只要容器启用了任何方向的滚动机制（哪怕被 overflow-y: hidden 抑制），底层滚动上下文就已创建，::-webkit-scrollbar 规则就会被应用到这个上下文上。它不是“按需加载”，而是“按容器绑定”。
-
overflow-x: scroll强制生成水平滚动条（即使内容没溢出），此时竖直方向虽不可见，但滚动机制仍存在 -
::-webkit-scrollbar-track等规则匹配的是容器的滚动上下文，不是当前可见的滚动条 - Firefox 完全不支持
::-webkit-scrollbar，所以这类美化在 Firefox 下无效且无替代方案
实际可操作的折中方案
想让水平/垂直滚动条看起来“不同”，只能靠结构隔离或 JS 模拟：
- 用嵌套容器分离：外层设
overflow-y: hidden，内层设overflow-x: auto，再给内层单独加::-webkit-scrollbar样式 —— 这样只有内层有滚动上下文，样式只作用于水平条 - 避免混用：不要在一个元素上同时设
overflow-x: auto和overflow-y: auto后还期望两个方向样式不同，它们共用同一套伪元素规则 - 若需精细控制（比如垂直条要窄、水平条要带圆角），必须拆成两个独立可滚动区域，例如表格的 tbody（y 向）和固定表头下的 wrapper（x 向）
div.x-scroll {
overflow-x: auto;
overflow-y: hidden;
}
div.x-scroll::-webkit-scrollbar { width: 8px; }
div.x-scroll::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; }
div.y-scroll {
overflow-y: auto;
overflow-x: hidden;
}
div.y-scroll::-webkit-scrollbar { width: 4px; }
div.y-scroll::-webkit-scrollbar-thumb { background: #999; border-radius: 2px; }
兼容性与维护提醒
::-webkit-scrollbar 是非标准私有特性，仅 Chromium 和 Safari 支持；Firefox 不支持，也无法通过 @supports 检测。如果项目需兼容 Firefox 或未来标准演进，应默认接受系统原生滚动条，或引入轻量 JS 库（如 simplebar）做跨浏览器模拟——但要注意，JS 滚动库会接管事件、影响 position: sticky 和 scrollIntoView 行为，不是纯 CSS 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
