Question

我需要具有水平滚动的外部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时：滚动;对于内部Div，水平滚动带有内部div而不是外部div。

Answer 1

我希望我能理解你真正想要的东西。

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

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

Answer 2

希望这对你有用

$（“＃outer”）。scroll（function（）{

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

}）;

:);）

使用CSS在外部div上水平滚动内部div（具有垂直滚动）

2 个答案: