CSS Only 样式水平滚动条

使用 CSS 可以轻松地创建样式水平滚动条， 无需JavaScript,并且适用于所有主流浏览器（Chrome，Firefox，Safari，Opera等）。

HTML 结构

在 HTML 中，我们需要一个包含滚动内容的容器，并设置一个容器来包含滚动栏。

<div class="scroll-container">
  <div class="scroll-content">
    <!-- scrollable content goes here -->
  </div>
  <div class="scrollbar">
    <div class="track">
      <div class="thumb"></div>
    </div>
  </div>
</div>

CSS 样式

接下来，我们需要设置 CSS 样式来创建水平滚动条。

.scroll-container {
  position: relative;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 200px;
}

.scroll-content {
  width: 800px;
}

.scrollbar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10px;
}

.track {
  background-color: #eee;
  position: relative;
  height: 100%;
}

.thumb {
  background-color: #ccc;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
}

解释

首先，我们将容器设置为相对位置，并将 overflow-x 设置为滚动， overflow-y 设置为隐藏，以创建水平滚动条。

然后，我们设置一个 scroll-content 容器，宽度为所需内容的总宽度。

.scrollbar 容器将滚动栏放置在 .scroll-container 下方，并使用 .track 容器作为轨道。轨道的高度设置为100% ，使其与容器的高度相同。

thumb 容器是我们可以拖动的小块。 它的高度设置为100％ ，这样它就与轨道的高度相同。 它的宽度设置为20％，并相对于左侧定位。

效果预览

在实现了上述HTML和CSS之后，一个样式水平滚动条将被创建。 您可以根据具体需求进行调整。

结论

CSS Only 样式水平滚动条是一种不需要 JavaScript 的快速简单的实现水平滚动条的方法。 它可以应用于各种项目，并且可以根据实际需求定制。