CODEWITHSUNDEEP
javascriptjqueryfirefoxsvgmozilla
Alvaro
Alvaro

Reputation: 41595

Scroll event not being triggered over SVG object in Firefox

I've noticed the scroll event (not sure about others) is not being propagated when scrolling over an object element like this:

<object id="svg_object" data="https://cdn.css-tricks.com/wp-content/uploads/2015/05/kiwi.svg" type="image/svg+xml"></object>

Reproduction of the issue in Firefox

Scroll over the red background and you'll see how a message get displayed in the java-script console as a result. Scrolling over the SVG (or yellow background) won't do anything.

Here's the code I'm using:

addMouse();

function MouseWheelHandler() {
    console.log("Getting the event");
}

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

Upvotes: 4

Views: 1935

Answers (1)

Robert Longson
Robert Longson

Reputation: 124029

You need to make the SVG content pointer-events: none i.e.

#svg_object {

    background:yellow;
    pointer-events: none;
}

otherwise the SVG document gets all the pointer events rather than the html container.

Upvotes: 4

Related Questions