垂直滾動div內的水平滾動div

是否可以垂直滾動外部div和僅水平滾動內部div（包含較小的div）？我使用的是移動應用的科爾多瓦，我可以水平和垂直滾動外部的div。內部div不滾動。垂直滾動div內的水平滾動div

這是外層div（#container的）的CSS，內部的div（＃行1，等）和其他的div內部。

#container { 
    height: 100%; 
    overflow-y: auto; 
} 

#line1, #line2, #line3 { 
    display: table; 
    width: 50em; 
    overflow-x: auto; 
} 

.smallDivs { 
    height: 100%; 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: -6%; 
}

的HTML結構如下：

<div id="container"> 
    <div id="line1"> 
     <div class="smallerDivs"><div> 
     <div class="smallerDivs"><div> 
    </div> 
    <div id="line2"> 
     <div class="smallerDivs"><div> 
     <div class="smallerDivs"><div> 
    </div> 
    <div id="line3"> 
     <div class="smallerDivs"><div> 
     <div class="smallerDivs"><div> 
    </div> 
</div>

來源

2015-08-14 Cress

你可以創建一個小提琴或向我們展示的HTML代碼？ – arunatebel

您是否嘗試在外部div上設置'overflow-x：hidden'？另外，哪些是你的線路的父母？ –

唯一的父母是「.app」div和body。如果我設置overflow-x：隱藏在外部div上，我不能水平滾動任何東西。 – Cress

你可以在你的#lineX使用white-space: nowrap;，並設置overflow: hidden;到html和body

嘗試使用此基本範例引導你：

html,body{ 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    overflow-y: auto; 
 
    background: red; 
 
} 
 

 
#line1, #line2, #line3 { 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
    padding: 20px; 
 
    background: yellow; 
 
    margin: 30px; 
 
} 
 

 
.smallerDivs { 
 
    height: 112px; 
 
    width: 112px; 
 
    margin: 10px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    background: #fff; 
 
}

<div id="container"> 
 
    <div id="line1"> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
    </div> 
 
    <div id="line2"> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
    </div> 
 
    <div id="line3"> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
     <div class="smallerDivs"></div> 
 
    </div> 
 
</div>

Here a jsfddle to play width

來源

2015-08-14 16:57:25

是的，你可以使用每個div都在你的CSS的overflow。 Overflow-y和Overflow-x

例如外層的div將有Overflow-y:scroll;
和你內心的div將有Overflow-x:scroll;

來源

2015-08-14 16:23:30

垂直滾動div內的水平滾動div

回答

相關問題