如何统一设置 WebKit 浏览器中水平与垂直滚动条的宽度-html教程-PHP中文网

在 WebKit 浏览器（如 Chrome、Edge、Safari）中，仅用 ::-webkit-scrollbar { width: 8px } 只能影响垂直滚动条；要让水平滚动条也获得相同宽度（即高度），需单独使用 ::-webkit-scrollbar-horizontal 并设置 height。

在 webkit 浏览器（如 chrome、edge、safari）中，仅用 `::-webkit-scrollbar { width: 8px }` 只能影响垂直滚动条；要让水平滚动条也获得相同宽度（即高度），需单独使用 `::-webkit-scrollbar-horizontal` 并设置 `height`。

默认情况下，::-webkit-scrollbar 的 width 属性仅作用于垂直滚动条（沿 Y 轴方向），而水平滚动条（沿 X 轴方向）需通过 height 属性控制其“厚度”。这是因为水平滚动条在视觉上是横向延伸的，其尺寸逻辑与垂直方向互为镜像：宽度对应垂直条，高度对应水平条。

✅ 正确写法如下（兼容性更佳，推荐使用）：

Gcore FastEdge

用于构建、编译或部署 WebAssembly HTTP 应用到 Gcore FastEdge 边缘计算——触发关键词为“deploy to FastEdge”“build a FastEdge app”“Wasm on the edge”“Gcore edge function”、上传 .wasm 文件或使用 fastedge Rust SDK。

下载

/* 全局滚动条基础尺寸（部分浏览器会回退至此） */
::-webkit-scrollbar {
  width: 8px;   /* 垂直滚动条宽度 */
  height: 8px;  /* 水平滚动条高度 —— 关键！很多教程遗漏此项 */
}

/* 显式声明（增强可读性与兼容性） */
::-webkit-scrollbar-vertical {
  width: 8px;
}

::-webkit-scrollbar-horizontal {
  height: 8px;
}

/* 可选：美化滑块（thumb）以保持一致性 */
::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

⚠️ 注意事项：

::-webkit-scrollbar-horizontal 和 ::-webkit-scrollbar-vertical 是标准 WebKit 伪元素，但仅在较新版本浏览器中稳定支持（Chrome ≥ 107，Edge ≥ 107，Safari ≥ 16.4）；旧版本建议保留 ::-webkit-scrollbar { height: 8px } 作为兜底。
水平滚动条仅在容器设置了 overflow-x: auto | scroll 且内容实际溢出时才会显示，务必确保父容器有明确宽度限制（如 white-space: nowrap + overflow-x: auto）或子元素超出容器宽度。
此方案不适用于 Firefox 或 IE（它们不支持 ::-webkit-scrollbar），如需全浏览器兼容，应结合 JavaScript 自定义滚动条库（如 simplebar）。

? 小结：统一滚动条尺寸的关键在于理解方向语义——对水平滚动条，请始终使用 height 而非 width，并确保 CSS 规则优先级足够、触发条件满足。