使用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

回答

相關問題