垂直滚动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>
答
你可以在你的#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>
答
是的,你可以使用每个div都在你的CSS的overflow
。 Overflow-y
和Overflow-x
例如外层的div将有Overflow-y:scroll;
和你内心的div将有Overflow-x:scroll;
你可以创建一个小提琴或向我们展示的HTML代码? – arunatebel
您是否尝试在外部div上设置'overflow-x:hidden'?另外,哪些是你的线路的父母? –
唯一的父母是“.app”div和body。如果我设置overflow-x:隐藏在外部div上,我不能水平滚动任何东西。 – Cress