javascript - 固定大小的容器中的水平滚动条

Question

我有一个固定大小的容器，带有一个更宽的 child 。

我不想滚动整个文档。我只想在 x 轴 中滚动 child 。

.banner {
  background-color: blue;
  width: 100%;
  height: 300px;
  padding: 20px;
}

.content {
  background-color: red;
  border-radius: 25px;
  width: 200%;
  height: 100%;
}

<div class="banner">
  <div class="content">
  </div>
</div>

Answer 1

在 body 上使用 CSS overflow: hidden 属性，因此“整个文档”不可 x 滚动，并设置 overflow-x: scroll 在 .banner 上，所以它是 x 滚动的:

body {
overflow-x:hidden;
}

.banner {
  background-color: blue;
  width: 100%;
  height: 300px;
  padding: 20px;
  overflow-x: scroll;
}

.content {
  background-color: red;
  border-radius: 25px;
  width: 200%;
  height: 100%;
}

<div class="banner">
  <div class="content">
  </div>
</div>
<hr>
<p>
   A paragraph of text to separate from the horizontal scrollbar
</p>