Scroll event not being triggered over SVG object in Firefox

Question

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 JavaScript 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
  }
}

Answer 1

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.