CODEWITHSUNDEEP
javascriptjquerygoogle-chromemousewheel
Alvaro
Alvaro

Reputation: 41595

mousewheel event doesn't fire over body in Chrome

I've noticed the mousewheel event doesn't fire when using the mouse wheel over the body instead of over any other element when using the latest version of Chrome. (38.0.2125.104 m).

This happen when using absolute positioned elements.

You can reproduce it in this fiddle by scrolling in the white area instead of in the red ones.

Any idea why is this happening? Any solution for it?

Used code for the fiddle:

addMouseWheelHandler();

function addMouseWheelHandler() {
    if (document.addEventListener) {
        document.addEventListener("mousewheel", MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
        document.addEventListener("wheel", MouseWheelHandler, false); //Firefox
    } else {
        document.attachEvent("onmousewheel", MouseWheelHandler); //IE 6/7/8
    }
}



function MouseWheelHandler(e) {
    e = window.event || e;

    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.deltaY || -e.detail)));
    console.log("mouse wheel!" + delta);

    return false;
}

Upvotes: 1

Views: 3004

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

This seems like a bug. The event listener is attached to the document, so it should apply to the entire document, regardless of the height of the body element.

As a work-around, you could add this code:

document.body.style.height= document.body.scrollHeight+'px';

Upvotes: 2

Johan Karlsson
Johan Karlsson

Reputation: 6476

It's because your body has no height, so you are scrolling outside of document. A parent element will not expand to the size of it's children if the children are positioned absolute. Try adding something like this:

html, body {
    min-height: 2000px;
}

or change your content from position: absolute;

Upvotes: 0

Related Questions