javascript - SVG Blocks Touch/Mousewheel events

Question

Is there a workaround? I am running my own custom scrollbar script as opposed to using the built in browsers functionality. I prefer to use SVG for my image elements for a number of reasons, but one, pretty major pitfall is the fact that touching or mousewheeling over an svg blocks the event and thus brings the page scrolling to a halt. This is even more noticeable on mobile browsers where the svg might take up the entire width of the document in which case as soon as you get to an SVG element, the user is unable to scroll past it.

I haven't tested in IE, but in Chrome, the touch commands dont work on top of SVG, and on Firefox, the mousewheel events are a problem. I assume it will be both on IE haha.

A decent solution would be to somehow add an event to my SVG elements the catches the events and passes them onto the scrolling events. I can't seem to find a way. An even better solution would be to somehow place the document above the SVG so the SVG doesn't interfere with the scrolling at all. Again, can't seem to find a way.

I embed my SVG elements with object tags, which is important for a variety of reasons. I'm assuming the object tag is actually the culprit.

Answer 1

Per Duopixel's comment. Adding:

object {
    pointer-events: none;
}

To the css does solve the problem in both Firefox and Chrome. I still have to test in IE, but for now this seems the best and easiest solution.

A good article that explains the pointer events attribute can be found at http://davidwalsh.name/pointer-events

If the issues mentioned above are an issue in IE, you can use a javascript solution that requires capturing the position of the pointer and passing it to the proper element. A working version that uses jQuery but could very easily be translated into vanilla javascript can be found here: http://jsbin.com/uhuto/1/edit