如何移除通过JS添加的顶部水平滚动条上方的额外空白

你的问题出在两处：一是滚动条内部子元素设置的paddingTop:1px，二是用来撑开滚动条的空白文本（\xA0）自带默认行高，再加上浏览器对div的默认样式，共同导致了顶部空白。

下面是具体修复步骤：

1. 修改JavaScript代码 #

删掉子元素的paddingTop设置，这行代码完全是多余的，只会增加不必要的顶部高度：

function doubleScroll(element) {
  const scrollbar = document.createElement("div");
  scrollbar.appendChild(document.createElement("div"));
  scrollbar.style.overflow = "auto";
  scrollbar.style.overflowY = "hidden";
  scrollbar.firstChild.style.width = element.scrollWidth + "px";
  // 移除此行：scrollbar.firstChild.style.paddingTop = "1px";
  scrollbar.firstChild.appendChild(document.createTextNode("\xA0"));
  scrollbar.classList.add("double-scroll-bar");
  let running = false;

  new ResizeObserver(() => {
    scrollbar.firstChild.style.width = element.scrollWidth + "px";
  }).observe(element);

  scrollbar.onscroll = function() {
    if (running) {
      running = false;
      return;
    }
    running = true;
    element.scrollLeft = scrollbar.scrollLeft;
  };

  element.onscroll = function() {
    if (running) {
      running = false;
      return;
    }
    running = true;
    scrollbar.scrollLeft = element.scrollLeft;
  };

  element.parentNode.insertBefore(scrollbar, element);
}

2. 更新CSS样式 #

给滚动条容器添加样式，清除默认间距并消除空白文本的行高影响：

.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;
  z-index: 5;
  position: relative;
}

.double-scroll-bar {
  border-top: 24px solid #2c2c2c;
  border-left: 24px solid #2c2c2c;
  border-right: 24px solid #2c2c2c;
  /* 新增样式 */
  margin: 0;
  padding: 0;
  line-height: 0; /* 干掉空白文本的行高 */
}

/* 可选：统一各浏览器滚动条高度 */
.double-scroll-bar::-webkit-scrollbar {
  height: 17px;
}
.double-scroll-bar {
  scrollbar-width: thin; /* 适配Firefox */
}

为什么这样有效？ #

• 去掉paddingTop:1px：直接消除了子元素带来的顶部额外高度。
• line-height:0：空白文本默认会继承父元素的行高，设置为0后不会再占据额外空间。
• 清除margin和padding：避免浏览器默认样式给滚动条容器加不必要的间距。
• 统一滚动条高度：不同浏览器的滚动条高度略有差异，设置后能让整体布局更整齐，避免细微空白。

内容的提问来源于stack exchange，提问作者larjae