如何通过溢出其内容来激活 div 内的水平滚动？答案

【问题标题】：How to activate horizontal scrolling inside a div by overflowing its content?如何通过溢出其内容来激活 div 内的水平滚动？
【发布时间】：2017-03-10 07:25:19
【问题描述】：

我有以下结构：

<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

我希望 div container 水平滚动。我希望cont1 直到cont5 留在container 内。我希望能够水平滚动这 5 个 div，并且可能我只想将一个 contx div 放在另一个旁边，就像我在代码中显示的那样。

问题是我无法实现这个解决方案。例如考虑：

<div id='container'>
  <div id='internalcontainer' style='width:750px'>
    <div id='cont1' style='width:150px'>Content 1</div>
    <div id='cont2' style='width:150px'>Content 2</div>
    <div id='cont3' style='width:150px'>Content 3</div>
    <div id='cont4' style='width:150px'>Content 4</div>
    <div id='cont5' style='width:150px'>Content 5</div>
  </div>
</div>

在我看来相当复杂的做法是通过简单地将一个 div 放在另一个旁边（连续 div）来获得水平滚动。所以我尝试将它们放在一个固定宽度的容器中，该容器放置在应该执行水平滚动的 div 内。当我尝试对其进行样式设置时，即使此代码也不起作用。我的问题是：

第一种结构是否可以得到横向滚动？
第二种结构的横向滚动是否可以获取？

我用 css overflow 尝试了很多，但没有得到任何东西......

谢谢

【问题讨论】：

标签： css html horizontal-scrolling

【解决方案1】：

如果触发了 onmouseover 事件，您可以将样式 overflow-x:scroll 应用到您的容器 div，如果触发了 onmouseout，则将其重置为 overflow-x:hidden。

编辑

这是您需要添加到容器 div 中的内容：

<div id='container' onmouseover='this.style["overflowX"]="scroll";'  onmouseout='this.style["overflowX"]="visible";'>
    ...
</div>

自己试试：http://jsfiddle.net/bukfixart/qX8Cx/

【讨论】：

适用于所有浏览器，几乎所有版本。即使在 IE 上也可以追溯到 v5。 Browser Support
但如果您通过 javascript 使用它，它不会使您的网站无效
抱歉 bukfixart 但它不起作用...此外 jsfiddle 也不起作用... :(

【解决方案2】：

是的，这两种结构都可以。我将说明第一个，因为它不那么冗长。我将使用 flex box CSS3 功能：

#container {
  display: inline-flex;
  flex-direction: row;
}

<div id='container'>
  <div id='cont1' style='width:150px'>Content 1</div>
  <div id='cont2' style='width:150px'>Content 2</div>
  <div id='cont3' style='width:150px'>Content 3</div>
  <div id='cont4' style='width:150px'>Content 4</div>
  <div id='cont5' style='width:150px'>Content 5</div>
</div>

如果您想在容器本身中添加滚动条，您可以添加：

#container {
  overflow-x: scroll;
}

【讨论】：