删除顶部水平滚动条上方的额外空间

Question

我仅使用 javascript 在 div 顶部添加水平滚动条。我想在这个滚动条的正上方添加一个边框。由于添加了滚动条，似乎有额外的空间。我可以做什么来删除这个空间？

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.double-scroll').forEach(function(element) {
    doubleScroll(element);
  });
});

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;
  // Keep scrollbar in sync when element size changes
  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);
}

.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;
}

<div class="my-class double-scroll">
  <p>TestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTesting</p>
</div>

Answer 1

div 包含一个 插入到 JS 中的空白：

scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));

您可以将其更改为空字符串来删除高度，或者使用 CSS 将高度设置为 0：

.double-scroll-bar > div {
  height: 0;
}

我还建议您通过为 div 使用类名来使用更具体的 CSS 选择器。例如：.scrollbar-inner

这是一个有效的示例：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.double-scroll').forEach(function(element) {
    doubleScroll(element);
  });
});

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.className = 'scrollbar-inner';
  scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
  scrollbar.classList.add('double-scroll-bar');
  let running = false;
  // Keep scrollbar in sync when element size changes
  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);
}

.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;
}

.scrollbar-inner {
  height: 0;
}

<div class="my-class double-scroll">
  <p>
    TestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTestingTesting
  </p>
</div>