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

时间:2018-03-20 07:42:55

标签: javascript html css css3 scroll

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

我不想滚动整个文档。我只想在 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>

1 个答案:

答案 0 :(得分:3)

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;