How do I get mouse wheel to scroll a div box, not the whole page?

[ayn2]

I have a page that consists of a few absolutely positioned div boxes. Some of the div boxes have scrollbars (all of them are overflow: auto), but the page itself does not (all the div boxes are sized to fit the window).

I would like the mouse wheel and PgUp/PgDn to scroll the div box under the cursor, but currently they are just ignored (I am guessing the browser interprets them as scrolling the whole page, which has nothing to scroll). Is these some "proper" way of solving this?

Thanks a lot!

[Bonusbana]

I would use iFrames instead of scrolling DIVs. iFrames are more cross-browser compatible as well.

[BlobFisk]

Welcome to WebmasterWorld, ayn2!

Other that a lot of complex event capture scripting, this is not something you can easily do.

I would not worry about it. The browser will scroll the div (or frame) if the focus is on that object. In the case of a div, I believe that if the mouse is over the div, the scroll wheel will scroll the div.

I would always recommend allowing the browser to behave in the way it wants to from a usability standpoint.

[isitreal]

I would like the mouse wheel and PgUp/PgDn to scroll the div box under the cursor, but currently they are just ignored (I am guessing the browser interprets them as scrolling the whole page, which has nothing to scroll). Is these some "proper" way of solving this?

The behavior you are looking for is only supported on the following browsers: IE 5.5 Windows, IE 6 Windows (with some problems with jerky scrolling in some cases), Firebird 0.7 for windows (but not 0.8).

Opera 6 has no support for overflow:auto;
Opera 7 supports it partially, but you have to do manual scrolling, in other words, you have to put your mouse on the div scroll bar and move it, a totally unacceptable option for user friendliness in my opinion.
Same with Safari, IE 5x mac, IE 4-5.0x, along with all other mozillas I've seen.

A supposed fix has been posted here [webmasterworld.com] and an update to that here [webmasterworld.com] but as you can see it's not simple, and only works for a single scrolling element. Those fixes are also not completely stable, I've gotten reports of complete failure on IE 6 but haven't been able to duplicate the error.

If you want iframe functionality, and you don't need the contents spidered (see this thread [webmasterworld.com] for problems with iframes) use iframes, there is currently no substitute for their full functionality.

[edited by: isitreal at 4:41 pm (utc) on April 20, 2004]

[john_k]

I use a span to do this on one site. I haven't tested it on the latest browsers, but it worked on the main browsers available when I put in place 2 years ago.

I honestly don't recall if that is why I used a span (as opposed to a div). There are other DIVs on the same page, so I am guessing it might be the reason.

Sticky me if you want the URL.

[isitreal]

john_k: Your site, as you note, tests for IE and delivers the scrolling content only for IE, otherwise it just lets it overflow.

This is why it's working, you were lucky that you did this for only IE, since IE is the only browser that supports that method. However, you might have trouble with IE mac unless you are testing for that as well.

You can duplicate this result with CSS by this:

* html #overflow-container1 {
overflow:auto;
}

this should make it overflow only on IE, I can't remember if that also applies to IE mac or not. In other words, the above would make #overflow-container1 have overflow:auto only for ie browsers, otherwise it would have no special overflow behavior.

[john_k]

Ah - ok thanks! Like I said, only IE browsers see this. And specifically, the code checks for "MSIE" in the browser's agent tag. If it doesn't have it, then it sends a different, degraded version.

I know that I had difficulty with the overall layout trying to get it to work on Netscape (4.x was still pretty popular at that time). I thought it had to do with something else, but this may have been part of it too. With the huge differences between 4.x and 6.0 at the time (and 6.0 was VERY buggy), I simply gave up.

Sorry about the red herring!

[isitreal]

The browser detection will fail if all you are doing is testing for MSIE in the tag, that will deliver non-functioning pages to Opera if set to Id as MSIE, IE 4 and 5.0 for windows which don't support that method properly, IE for mac as well.

At the least you want to first test for Opera in the navigator user agent string first, then MSIE if not mac.

Anyway, it wasn't really a red herring, I've tested these methods extensively in vain hope of finding an actual replacement for iframes but none of them work quite right, I was just curious about using the span tag.