Scrolling in HTML/Javascript

Question

I have been trying to implement scroll bars to scroll through the content of a canvas.

What I have done is basically create a div with overflow set to scroll for the scroll-bar, and an inner div with varying width/height according to the width/height of the content of the canvas.

When I get an onscroll event on either of the two scroll-bars, I can use scrollLeft and scrollTop properties to set how many pixels I need to shift the canvas content.

I noticed that while the vertical scroll-bar was working as intended, changing the inner width of the horizontal scroll-bar was not doing anything.

I was under the impression that something like;

<div id='outer'>
    <div id='inner'>
    </div>
</div>

<style>
     div#outer {
         width : 500px;
         height : 50px;
         overflow-x : scroll;
     }

     div#inner {
         width : 20000px;
     }
</style>

would create a div block of width 500px, with a horizontal scroll-bar, allowing us to scroll through the width of the inner div, 20000px.

But for some reason it does not work for a horizontal scroll-bar(example), while working perfectly for a vertical scroll-bar(example).

Why does this happen? Is this something to do with how I am using style.width for the inner div?

What can I do to get a working horizontal scroll-bar?

Answer 1

It works if you give a minimum height or add content to the inner element with larger width than the container.

bar.style.minHeight = '1px';

Fiddle

For the reason, my bet is that a block element with no content (0px height) is displayed similarly to a display:none element.