4

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.

4

1 回答 1

8

根据 Duopixel 的评论。添加:

object {
    pointer-events: none;
}

到 css 确实解决了 Firefox 和 Chrome 中的问题。我仍然必须在 IE 中进行测试,但目前这似乎是最好和最简单的解决方案。

可以在http://davidwalsh.name/pointer-events找到一篇解释指针事件属性的好文章

如果上述问题是 IE 中的问题,您可以使用需要捕获指针位置并将其传递给适当元素的 javascript 解决方案。可以在此处找到使用 jQuery 但可以很容易地转换为 vanilla javascript 的工作版本:http: //jsbin.com/uhuto/1/edit

于 2013-05-14T02:45:24.170 回答