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?

Fabrício Matté · Accepted Answer · 2012-08-08 12:23:04Z

2

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.

edited Aug 8, 2012 at 12:23

answered Aug 8, 2012 at 12:17

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Scrolling in HTML/Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related