本文介绍通过 css 重置内部占位元素高度或移除无意义空格字符，精准消除 javascript 动态添加的顶部水平滚动条上方多余空白的问题。
在使用 javaScript 实现“双滚动条”（即在容器上方额外添加一个同步滚动的横向滚动条）时，常见问题之一是：滚动条区域上方意外出现不可见但占据空间的空白，导致 border-top 无法紧贴滚动条视觉边缘。根本原因在于代码中插入了不可见空格字符 ‘xA0’（即 ）作为占位内容：
scrollbar.firstChild.appendChild(document.createTextnode('xA0'));该空格虽不可见，却会触发浏览器为内联文本内容分配默认行高（line-height）和字体度量（如 ascent/descent），从而撑开父容器高度，造成顶部间隙。
✅ 推荐解决方案：css 高度归零（推荐且健壮）
最简洁、兼容性好、不修改 js 逻辑的方式，是为滚动条内部占位
显式设置 height: 0，并配合 overflow: hidden 消除潜在渲染干扰：
.double-scroll-bar > div { height: 0; overflow: hidden; margin: 0; padding: 0; }? 强烈建议：为该子 添加语义化类名（如 .scrollbar-inner），避免依赖脆弱的层级选择器（如 > div），提升可维护性与样式隔离性。
? 同步优化：JS 层级清理（可选增强）
若希望从源头精简 dom，也可将占位文本替换为空字符串（”），但需注意：仅移除文本不足以完全消除高度——仍需 CSS 配合重置。因此推荐组合使用：
// 替换原代码中的这行： // scrollbar.firstChild.appendChild(document.createTextNode('xA0')); // ✅ 改为（更语义、更轻量）： scrollbar.firstChild.className = 'scrollbar-inner'; // 不追加任何文本节点 —— 空 div + height: 0 已足够驱动滚动机制
? 完整工作示例（含关键修复）
TestingTesting...
.my-class { padding: 16px; border-left: 24px solid #2c2c2c; border-right: 24px solid #2c2c2c; border-bottom: 24px solid #2c2c2c; background-color: white; overflow: scroll; display: block; position: relative; z-index: 5; } .double-scroll-bar { border-top: 24px solid #2c2c2c; border-left: 24px solid #2c2c2c; border-right: 24px solid #2c2c2c; /* 关键：确保滚动条容器不因子元素产生额外高度 */ } .scrollbar-inner { height: 0; overflow: hidden; margin: 0; padding: 0; }⚠️ 注意事项
- 勿依赖 font-size: 0 或 line-height: 0 单独处理：它们可能被继承或受父级影响，不如 height: 0 直接可靠；
- ResizeObserver 无需改动：宽度同步逻辑完全独立于高度问题；
- 移动端兼容性：height: 0 在所有现代浏览器（含 ios safari）中表现一致；
- 调试技巧：在开发者工具中临时勾选 .scrollbar-inner 的 outline: 1px solid red，可直观确认其是否真正“塌陷”。
通过上述 CSS 主导 + JS 辅助的组合方案，即可彻底消除顶部滚动条上方的空白，使 border-top 精确对齐滚动轨道上沿，实现专业级 ui 控制。