使用 CSS 水平滚动内部 div（具有垂直滚动）与外部 div答案

【问题标题】：Scroll inner div (having vertical scroll) horizontally with outer div using CSS使用 CSS 水平滚动内部 div（具有垂直滚动）与外部 div
【发布时间】：2015-09-09 20:15:03
【问题描述】：

我需要带有水平滚动的外部 div 和带有垂直滚动的内部 div，并且内部 div 应该与外部 div 一起移动。

<body>
  <div id="wrapper">

    <div id="outer">content outer
        <div id="inner"> 
          <table>
            <tr>
              <td>column1</td>                
              <td>column2</td> 
              <td>column2</td>  
              <td>column2</td>  
              <td>column2</td>                      
        </tr>
        </table>
        </div>
    </div>
</div>
</body>

#wrapper {
    position:relative;
    height:200px;
    width:200px;
}

#outer {
    background-color: red;
    overflow-x: auto;
    overflow-y: hidden;
    height:200px;
    width:200px;
    white-space: nowrap;
}

#inner {
    color: white;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    height:150px;
    background-color: blue; 
    white-space: nowrap;
    position:relative; z-index:1;
}

当我应用 overflow-y: scroll;对于Inner div，水平滚动是Inner div而不是outer div。

【问题讨论】：

您的问题令人困惑。你能说清楚吗？
要实现这一点，你需要你的外部 div 在 X 轴上溢出。您提供的代码不会发生这种情况。你的内部 DIV 应该比外部 div 大，或者外部 div 内应该有更多的元素水平溢出它

标签： css

【解决方案1】：

希望这对你有用

$("#outer").scroll(function() {

$("#inner").scrollLeft($(this).scrollLeft());

});

:) ;)

【讨论】：

【解决方案2】：

我希望我能很好地理解你真正想要什么。

#wrapper{
Width:200px;
height:300px;
overflow:hidden;
}

#outer{
width:400px;
height:300px;
Overflow:auto;
}
#inner{
width:200px;
Height:500px;
overflow:auto;
}

【讨论】：

我有两个 div 一个外部 div 我需要水平滚动，它不应该有垂直滚动。一个内部 div，应该有垂直滚动，没有水平滚动。现在内部 div 应该通过外部 div 的滚动水平滚动，因为只有外部 div 具有水平滚动。内部 div 的垂直滚动仅特定于内部 div。内层div垂直滚动对外层div没有影响。
jsfiddle.net/8dmwLwfa/1 创建了一个小提琴。在这里，您可以看到外部红色 div 具有水平滚动，内部蓝色 div 正在滚动。两个 div 都随着外部 div 的水平滚动而滚动。现在问题在于内部 div 的垂直滚动。我需要在内部 div 中垂直滚动。