Child div horizontally scrollable but fix parent window

Question

I have a html, css question. I'd like to make child div horizontally scrollable but parent window unscrollable.

Currently, the following is the code.

<div id="parent">
    <div id="div1">
        ...
    </div>

    <div id="div2" style="overflow-x:scroll; width:2000px">
        <img src="1.png"/>
        <img src="2.png"/>
        <img src="3.png"/>
        <img src="4.png"/>
        <img src="5.png"/>
        <img src="6.png"/>
        <img src="7.png"/>
    </div>
</div>

But when scroll div2, it will make the whole window to scroll.

The following is the schematic diagram.

Anyone has any idea?

Answer 1

To make it overflow, the content must be larger than the div, not the div itself. and to be able to make it inline, you must use display:inline-block and white-space: nowrap . Let me know if you have concerns.

Check out the fiddle below.

Fiddle

CSS

#div2{
    display:inline-block;
    white-space: nowrap;
}

Answer 2

Set overflow:hidden; to your parent div and overflow-x: auto; to your child div.

Answer 3

You can simply disable scrolling for the html or body element. Not entirely sure that's what you wish to do, but either that or the #parent element.

html,body{
    overflow:hidden;
}

or

#parent{
    overflow:hidden;
}

Additionally right now your #div2 is wider than most screens, so you won't get a scroll bar for it likely, so you might be intending to scroll the #parent element?

Additionally it is enough to set the overflow to auto instead of scroll as scroll just forces a scrollbar to be visible even if there is no content to scroll.