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

我需要具有水平滚动的外部div和具有垂直滚动和内部div的内部div应该随外部div移动。使用CSS滚动内部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; 
}

当我申请溢出-Y：滚动;内部Div，水平滚动带有内部div而不是外部div。

来源

2015-09-07 Divya

你的问题很混乱。你能清楚吗？ –

为了实现这一点，您需要将外部div在X轴上溢出。您提供的代码不会发生这种情况。你的内部DIV应该比外部div大，或者外部div内应该有更多的元素使其水平溢出 – chimos

希望这会为你工作

$（ “＃外”）滚动（函数（）{

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

}）。

:);）

来源

2015-09-09 12:15:03

我希望我明白你真正想要什么。

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

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

来源

2015-09-07 20:40:16 codetheweb

我有两个Div一个外部div，其中我需要水平滚动，它不应该有垂直滚动。一个内部div应该有垂直滚动和没有水平滚动。现在Inner div应该通过滚动外部div来滚动水平，因为只有外部div才有水平滚动。内部div的垂直滚动仅针对内部div。内部div的垂直滚动对外部div没有影响。 – Divya

https://jsfiddle.net/8dmwLwfa/1/创建了一个小提琴。在这里你可以看到外部的红色div有滚动的内部蓝色div的水平滚动。这两个Div都用外部div的水平滚动滚动。现在问题是内部div的垂直滚动。我需要内部div的垂直滚动。 – Divya

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

回答

相关问题