DIV 内的 HTML 水平滚动，无需页面滚动答案

【问题标题】：HTML Horizontal Scrolling within DIV without page scrollingDIV 内的 HTML 水平滚动，无需页面滚动
【发布时间】：2021-09-13 05:28:25
【问题描述】：

我有一个包含多个 div 的页面。第一个 div 包含我想要并排水平显示的表格，如果它们包含的内容超过屏幕的宽度，我希望只为那个 div 水平滚动。无论我如何修改显示设置 div 3 x 3 中的表格堆栈（由于每个表格的宽度为 30%），下面的水平滚动条什么都不做。

代码：

body {
  overflow-x: hidden;
  overflow-y: auto;
}

body .contained {
  overflow-x: scroll;
  display: inline;
  width 100%;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 200px;
  text-align: center;
  border-radius: 25px;
  background-color: AliceBlue;
  border-style: solid;
  border-width: .5px;
  margin-right: 10px;
  float: left;
  overflow: none;
}

.title {
  color: grey;
  font-size: 18px;
}

h1 {
  background-color: PowderBlue;
  border-radius: 25px 25px 0px 0px;
  margin-top: 0px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button:hover,
a:hover {
  opacity: 0.7;
}

.float-container {
  padding: 20px;
  background-color: White;
}

<div class="contained">
  <div class="card">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist</p>
    <p>Information Systems</p>
  </div>
  <div class="card" id="div2">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist</p>
    <p>Information Systems</p>
  </div>
  <div class="card" id="div2">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div2">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div2">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div2">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div2">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
</div>
<div>
  <div class="card" id="div3">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div3">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div3">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div3">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div3">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
  <div class="card" id="div3">
    <h1>Discovery Directory</h1>
    <p class="title">George Larson</p>
    <p>Telecom Specialist<br>Information Systems</p>
  </div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

你可以使用 Flexbox 解决这个问题。

我将display: inline 更改为display: flex。不太清楚为什么选择inline，因为它确实让你的div 表现得像span。另外，overflow-x: auto 因为只有在发生溢出时才需要滚动条。

body .contained {
  overflow-x: auto;
  display: flex;
  width: 100%;
}

还添加了flex-shrink: 0 并将float: left 删除到.card。有关此更改的更多信息，请访问 question

<!DOCTYPE html>
<html lang="enUS">

<head>
  <style>
    body {
      overflow-x: hidden;
      overflow-y: auto;
    }
    
    body .contained {
      overflow-x: auto; /* MODIFIED */
      display: flex; /* MODIFIED */
      width: 100%;
    }
    
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      width: 200px;
      text-align: center;
      border-radius: 25px;
      background-color: AliceBlue;
      border-style: solid;
      border-width: .5px;
      margin-right: 10px;
      /* float: left; /* REMOVED */
      flex-shrink: 0; /* ADDED */
      overflow: none;
    }
    
    .title {
      color: grey;
      font-size: 18px;
    }
    
    h1 {
      background-color: PowderBlue;
      border-radius: 25px 25px 0px 0px;
      margin-top: 0px;
    }
    
    a {
      text-decoration: none;
      font-size: 22px;
      color: black;
    }
    
    button:hover,
    a:hover {
      opacity: 0.7;
    }
    
    .float-container {
      padding: 20px;
      background-color: White;
    }
  </style>
</head>

<body>

  <div class="contained">
    <div class="card">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist</p>
      <p>Information Systems</p>
    </div>

    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist</p>
      <p>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div2">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
  </div>
  <div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>
    <div class="card" id="div3">
      <h1>Discovery Directory</h1>
      <p class="title">George Larson</p>
      <p>Telecom Specialist<br>Information Systems</p>
    </div>

  </div>

</body>

</html>

【讨论】：

非常感谢，我已经为此尝试了几天。它完全按照我想要的方式工作。至于内联显示，我玩了很多选择。你摇滚。
乐于助人！建议学习盒子模型和 flexbox（以后可能是 CSS 网格）。我喜欢这个资源flexboxfroggy.com

【解决方案2】：

我认为你可以通过指定要滚动的 div 的溢出来做到这一点。

喜欢：


<div id="scrollable">
Scrollable Content
</div>

<style>
div#scrollable{
overflow: scroll;
}
</style>

查看更详细的用法说明： Examples with information Exact example of usage

滚动条

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

改为

...
 body {
      overflow:hidden
    }
...

结果：

没有变更集：

【讨论】：

刚刚试了一下，它拿走了滚动条，仍然堆叠。
好的，我明白了...你需要改变body { overflow-x: hidden; overflow-y:auto} 到 {overflow:hidden} 它将隐藏所有滚动条，除了您将上述代码放在上面的滚动条
感谢您抽出宝贵时间查看此内容，maazadeeb 为我提供了我正在寻找的答案。祝你有美好的一天。