如何启用CSS滚动条的水平和垂直方向？

Question

我已经搜索了几个小时，但没有找到答案，所以我需要一些帮助。

有一个 div 元素，提供了水平滚动条。

<div id='parent'>
   <div id='el1'></div>
   <div id='el2'></div>
   <div id='el3'></div>
</div>

当鼠标指针位于该div区域时，垂直滚动不起作用。

已尝试过 =>

#id overflow: auto
#id overflow-x: auto, overflow-y: auto
#id overflow-x: scroll, overflow-y: scroll

我该如何解决这个问题？

- Minseo Lee

---

overflow-y or just overflow: auto - Dai

@Dai，您是指在父元素上使用overflow-y还是overflow:auto？这在我的代码中不起作用。 - Minseo Lee

你的父元素需要有overflow属性，并且你需要为其设置一些高度才能使其正常工作。如果高度小于所有子元素的高度之和，那么就会出现滚动条。 - ale917k

@MinseoLee，你可以尝试使用overflow:scroll !important;来覆盖一些已经存在的样式。 - Keshav Bajaj

我已经添加了一个可用的代码答案，请检查一下。 - Jabal Logian

Answer 1

这里，这可以给你一些想法：

#el1, #el2, #el3 {
  width: 200px;
  height: 200px;
  background: lightblue;
  display:inline-block;
}

.parent {
  width:100px;
  height:100px;
  border: 2px dashed grey;
  overflow: auto;
}

<div class="parent">
   <div id='el1'>a</div>
   <div id='el2'>b</div>
   <div id='el3'>c</div>
</div>

这段代码片段是否按照您的期望工作？

- Blaze_droid

Answer 2

关键在于设置父元素和子元素的height和width。

如果子元素的总宽度大于父元素的宽度，则可以通过在父元素上使用overflow: auto来实现水平滚动（X轴）。

如果子元素的总高度大于父元素的高度，则可以通过在父元素上使用overflow: auto来实现垂直滚动（Y轴）。

这是工作代码：https://codesandbox.io/s/kind-gates-djhnx?file=/src/styles.css HTML文件：

<div id="parent">
  <div id="child-1">
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever
    since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged. It was popularised in the 1960s with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions
    of Lorem Ipsum.
  </div>
  <div id="child-2">
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever
    since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged. It was popularised in the 1960s with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions
    of Lorem Ipsum.
  </div>
  <div id="child-3">
    Lorem Ipsum is simply dummy text of the printing and typesetting
    industry. Lorem Ipsum has been the industry's standard dummy text ever
    since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book. It has survived not only five
    centuries, but also the leap into electronic typesetting, remaining
    essentially unchanged. It was popularised in the 1960s with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently
    with desktop publishing software like Aldus PageMaker including versions
    of Lorem Ipsum.
  </div>
</div>

CSS 文件：

#parent {
  overflow: auto;
  height: 300px;
  width: 300px;
  background-color: gainsboro;
}

#child-1 {
  overflow: auto;
  width: 500px;
  background-color: lightblue;
}

#child-2 {
  overflow: auto;
  width: 500px;
  background-color: lightgreen;
}

#child-3 {
  overflow: auto;
  width: 500px;
  background-color: lightcoral;
}

- Jabal Logian

Answer 3

以下是关于 overflow 的工作示例，您需要在 #parent 中设置 height 和 width 属性，并将 overflow 属性设置为 auto。

如果任何子元素的 width 大于父元素的宽度，则会自动在 x 方向上滚动。

如果所有子元素的总 height 大于父元素的高度，则会自动在 y 方向上滚动。

#parent{
  background:#333;
  width:300px;
  height:300px;
  overflow:auto;
}

#el1{
  background:#999;
  height:200px;
  width:200px;
}

#el2{
  background:green;
  height:400px;
  width:400px;
}

#el3{
  background:yellow;
  height:400px;
  width:400px;
}

<div id='parent'>
   <div id='el1'></div>
   <div id='el2'></div>
   <div id='el3'></div>
</div>

- Ibram Reda