html - 如何在带有隐藏滚动条的div中显示div上的水平滚动条

Question

如果屏幕尺寸小于我为 div 设置的最小宽度，我想在我的“内容”div 上显示水平滚动条。父“容器”溢出-x 设置为隐藏，因此滚动不会显示整个页面。

.content {
  background: cyan;
  height: 100%;
  min-width: 1500px;
  overflow-x: scroll;
  white-space: nowrap;
}

.container {
  overflow-y: auto;
  overflow-x: hidden;
}

<div class="container">
  <div class="row">
    <div class="parent">
      <div class="content">
        This is a test.
      </div>
    </div>
  </div>
</div>

在我下面的当前输出中，滚动条已经可见但不可滚动。div 也被切断。需要更改哪个部分才能显示滚动？我正在使用引导程序 4。

标签： htmlcssbootstrap-4

Answer 1

要启用scroll-view，您需要overflow-x: auto在.parentdiv 上设置，而不是在.contentdiv 上设置。

保持.contentdiv 宽度1500px并在 div 上设置 x-scrollable ，.parent它将起作用。

.parent {
  width: 100%;
  overflow-x: auto;
}

.content {
  background: cyan;
  height: 100%;
  min-width: 1500px;
  white-space: nowrap;
}

.container {
  overflow-y: auto;
  overflow-x: hidden;
}

<div class="container">
  <div class="row">
    <div class="parent">
      <div class="content">
        This is a test.
      </div>
    </div>
  </div>
</div>