CODEWITHSUNDEEP
htmlcsscordova
Cress
Cress

Reputation: 432

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>

Upvotes: 4

Views: 10081

Answers (2)

Yandy_Viera
Yandy_Viera

Reputation: 4380

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

Upvotes: 8

Tom Buxton
Tom Buxton

Reputation: 65

Yes you can use on each div an overflow in your css. Overflow-y and Overflow-x

For example the outer div would have Overflow-y:scroll;
and your inner divs will have Overflow-x:scroll;

Upvotes: 0

Related Questions