垂直滚动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

回答

相关问题