Cress Cress - 3 months ago 20
CSS Question

Horizontal scroll divs inside vertical scroll div

is it possible to scroll the outer div only vertically and the inner divs (containing smaller divs) only horizontally?
I'm using cordova for a mobile app and I can scroll the outer div both horizontally and vertically. The inner divs don't scroll.



This is the CSS for the outer div (#container), the inner divs (#line1, etc.) and the other divs inside.

#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%;
}


The HTML structure looks like this:

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

Answer

You can use white-space: nowrap; in yours #lineX and set overflow: hidden; to html and body

Try to use this basic example to guide you:

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

Comments