本文介绍通过 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 控制。