具有固定大小的容器中的水平滚动条

Question

我有一个固定尺寸​​的容器，更宽的孩子。

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

.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

在overflow: hidden上使用CSS body属性，因此＆＃34;整个文档＆＃34;不是x-scrollable，并在overflow-x: scroll上设置.banner，因此它是x-scrollable：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;