本文详解通过 javascript 实现双滚动条（顶部 + 原生底部）时，顶部滚动条容器意外产生垂直间隙的根本原因及两种可靠解决方案：css 高度归零法与移除占位符文本法。
在使用 doubleScroll 模式为
添加顶部水平滚动条时，你可能会发现 .double-scroll-bar 容器上方存在一段无法解释的空白区域——即使已设置 border-top，视觉上边框仍“悬浮”于滚动条之上。该问题并非由外边距（margin）或父元素样式引起，而是源于滚动条内部子元素（即 scrollbar.firstChild）中插入的不可见占位符字符：
scrollbar.firstChild.appendChild(document.createTextNode('\xA0')); // （Unicode \xA0）虽不可见，但作为内联文本节点，会触发浏览器默认的行高（line-height）和字体基线渲染逻辑，导致其父容器（.double-scroll-bar > div）产生最小高度（通常约 16–20px），从而撑开顶部空间。
✅ 推荐解决方案（二选一）
方案一：CSS 强制设为零高度（推荐）
为内部滚动内容容器添加明确类名（如 scrollbar-inner），并通过 CSS 精准控制其尺寸：
.scrollbar-inner {
height: 0;
margin: 0;
padding: 0;
line-height: 0;
font-size: 0;
}同时更新 JS，确保该类被正确应用：
scrollbar.firstChild.className = 'scrollbar-inner';
// 移除或保留 均可（因 height: 0 已覆盖其影响）
scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));? 优势：语义清晰、兼容性强、不依赖 DOM 内容变更，且便于后续扩展（如添加 loading 指示器等）。
方案二：彻底移除占位符文本
若无需任何内容占位，可直接省略 节点：
// 替换原代码中这一行：
// scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
// → 改为不追加任何文本节点（空 div 即可）
// （注意：需确保 width 和 overflow 设置仍生效）此时需额外保障 scrollbar.firstChild 在无内容时仍能响应滚动——现代浏览器下，仅靠 width + overflow: auto 已足够，但建议保留 paddingTop: '1px' 以兼容旧版渲染行为。
⚠️ 注意事项
- 避免使用 visibility: hidden 或 opacity: 0：它们不改变盒模型尺寸，无法消除空白；
- 慎用 display: none：会导致滚动条失效（内容不可滚动）；
- ResizeObserver 同步时机：确保 scrollWidth 更新及时，避免宽度错位；
- 边界样式对齐：.double-scroll-bar 的 border-top 应与 .my-class 的 border-bottom 宽度/颜色严格一致，保证视觉连贯性。
✅ 最终效果验证
应用任一方案后，顶部滚动条将紧贴 .my-class 元素上边界，border-top 直接渲染在滚动轨道正上方，实现真正的“双轨对齐”，满足高精度 UI 布局需求。
