Internet Explorer bug: Broken mouse wheel scrolling

One of the things I encountered today was a problem with scrolling some part of a website with the mouse wheel. It worked fine in Firefox and Opera but Internet Explorer refused to scroll correctly. The content I was trying to scroll within was a div tag, which was configured with the CSS property "overflow: auto".

After doing some testing I discovered that the mouse wheel scrolling would only work when the mouse cursor was hovering the text in the div tag. When the mouse cursor was hovering just some white space above or below a paragraph the scroll wheel refused to work.

At first I thought this issue was caused by Opens external link in new windowFleXscroll which is a piece of javascript which I use to customize the design of scrollbars, but after disabling FleXscroll the issue remained and after doing some more testing I discovered that this bug would only occur when the page was rendered in standards-compliant-mode. After removing the DOCTYPE and thus triggering quirks-mode, the bug was gone and everything worked fine except that my page looked like shit since everyone knows quirks-mode is the root of all evil.

So I put the DOCTYPE back in and tried to figure out some other way to fix this issue. Since the scrolling would only work when the cursor was hovering some text I thought that maybe it just needs to hover something, even if that something looks like nothing (you're thinking: what?!), so I added "background: #ffffff" to the style of the div tag and guess what? Problem solved.

Checkout this page demonstrating the bug which contains to similar content items, the only difference is the background property. If you use Internet Explorer you will notice that you cannot scroll one of the items with the mouse wheel unless your mouse cursor is over some part of the text.

This bug occurs in Internet Explorer 7 and possibly lower versions too.

Why!!! Internet Explorer why!!!

8 Responses to “Internet Explorer bug: Broken mouse wheel scrolling”

  1. Gravatar: Tina Tina Says:

    Man you don't even know how long I've waited for this since disabling my own Movable Type widget (that doesn't work since Haloscan bypasses that code).

    THANK YOU!

  2. Gravatar: brightest tactical flashl brightest tactical flashl Says:

    Find here the brightest Cree led Flashlight now available plus on sale now!

  3. Gravatar: best flashlight best flashlight Says:

    See the brightest cree led tactical flashlight that is available and currently on sale now!

  4. Gravatar: school pa system school pa system Says:

    Find the greatest wireless pa system for schools currently now in stock plus on sale now!

  5. Gravatar: best flash light best flash light Says:

    Find here the top brightest tactical flashlight now now in stock plus on sale now!

  6. Gravatar: wireless public address s wireless public address s Says:

    Find the top school bell scheduling systems currently available plus on sale now!

  7. Gravatar: wireless pa system wireless pa system Says:

    Find the top wireless buzzer alarm that's in stock plus currently on sale now!

  8. Gravatar: pa speakers pa speakers Says:

    See the greatest school bell systems that's in stock and currently on sale now!

Leave a Reply

remember my information