横向滚动条高度需通过::-webkit-scrollbar的height属性设置，仅WebKit/Blink浏览器支持；必须配合overflow-x:auto及内容真实溢出才能生效，Firefox等不支持该伪元素。
横向滚动条高度不能直接设，得改 ::-webkit-scrollbar
浏览器不提供类似 scrollbar-height 这样的 CSS 属性来直接控制横向滚动条高度。你看到的“横向滚动条”，其实是水平方向上的滚动轨道和滑块，它由 WebKit 内核的伪元素控制，仅在 Chrome、Edge、Safari 等 Blink/WebKit 浏览器中生效；Firefox 和旧版 IE 完全不支持该机制。
真正能调的是它的视觉尺寸：用 ::-webkit-scrollbar 控制整体宽度（对横向滚动条来说，这个“宽度”实际表现为**高度**），再用 ::-webkit-scrollbar-thumb 控制滑块厚度。
-
::-webkit-scrollbar的width值决定**垂直滚动条的宽度**，height值才决定**横向滚动条的高度**（别记反） - 必须同时设置
overflow-x: auto或overflow: auto，否则伪元素无处挂载 - 只写
::-webkit-scrollbar-thumb不加::-webkit-scrollbar，样式不会生效
overflow-x: auto 容器必须存在且真正溢出
横向滚动条是否出现，不取决于你写了多少样式，而取决于容器内内容真实宽度是否 > 容器可用宽度。哪怕只多 1px，滚动条就出来；如果没溢出，::-webkit-scrollbar 再好看也看不见。
- 检查父级是否用了
display: flex且没设min-width: 0，这会让子容器拒绝收缩，掩盖溢出 - 表格类元素（
<table>）默认无视自身overflow，必须用<div class="wrapper">包裹，并设display: block+min-width: max-content - 图片、长单词、URL 没加
max-width: 100%或word-break: break-all，会偷偷撑宽容器
完整可运行的横向滚动条高度控制示例
以下代码能让横向滚动条“变矮”（比如从默认约 12px 改为 6px），并适配常见容器：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
.scrollable-x {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
}
<p>.scrollable-x::-webkit-scrollbar {
height: 6px; /<em> ← 关键：这就是横向滚动条的“高度” </em>/
}</p><p>.scrollable-x::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 3px;
}</p><p>.scrollable-x::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
- 务必把类名（如
.scrollable-x）加在**外层容器**上，不是加在<table>或<pre>上 - 若容器是 Flex 子项，追加
flex-shrink: 1; min-width: 0;，否则它可能撑满父容器，导致永远不溢出 - 在 Safari 中，
-webkit-overflow-scrolling: touch缺失会导致拖拽松手即回弹，不是“高度没变”，而是根本没法滑
Firefox 和跨浏览器兼容的现实
Firefox 不支持 ::-webkit-scrollbar，也没有等效标准 API。如果你需要统一外观，只能接受它用系统原生滚动条（高度不可控），或彻底放弃原生滚动，改用 JS 滚动库（如 simplebar、overlay-scrollbars）——但它们会增加 bundle 体积、影响首屏性能，且需手动处理键盘导航与焦点管理。
真正卡住的往往不是“怎么改高度”，而是“为什么没显示出来”。先确保容器计算宽度确实溢出，再谈样式；否则所有 ::-webkit-scrollbar 设置都只是写给空气看的。
