SVG Blocks Touch/Mousewheel events
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.
javascript html svg
asked May 9 '13 at 23:30
ryandlfryandlf
8,7372685141
add a comment |
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.
javascript html svg
asked May 9 '13 at 23:30
ryandlfryandlf
8,7372685141
1
That is a weird behavior, do the SVGs have any javascript embedded in them? Addingobject {pointer-events: none;}to your CSS should fix the issue in Firefox and Chrome (but not IE).
– Duopixel
May 10 '13 at 17:04
add a comment |
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.
javascript html svg
asked May 9 '13 at 23:30
ryandlfryandlf
8,7372685141
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.
javascript html svg
javascript html svg
asked May 9 '13 at 23:30
ryandlfryandlf
8,7372685141
asked May 9 '13 at 23:30
ryandlfryandlf
8,7372685141
asked May 9 '13 at 23:30
ryandlfryandlf
8,7372685141
asked May 9 '13 at 23:30
ryandlfryandlf
8,7372685141
asked May 9 '13 at 23:30
ryandlfryandlf
8,7372685141
8,7372685141
1
That is a weird behavior, do the SVGs have any javascript embedded in them? Addingobject {pointer-events: none;}to your CSS should fix the issue in Firefox and Chrome (but not IE).
– Duopixel
May 10 '13 at 17:04
add a comment |
1
That is a weird behavior, do the SVGs have any javascript embedded in them? Addingobject {pointer-events: none;}to your CSS should fix the issue in Firefox and Chrome (but not IE).
– Duopixel
May 10 '13 at 17:04
1
1
That is a weird behavior, do the SVGs have any javascript embedded in them? Adding
object {pointer-events: none;} to your CSS should fix the issue in Firefox and Chrome (but not IE).– Duopixel
May 10 '13 at 17:04
That is a weird behavior, do the SVGs have any javascript embedded in them? Adding
object {pointer-events: none;} to your CSS should fix the issue in Firefox and Chrome (but not IE).– Duopixel
May 10 '13 at 17:04
add a comment |
1 Answer
1
active
oldest
votes
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
answered May 14 '13 at 2:45
ryandlfryandlf
8,7372685141
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f16472859%2fsvg-blocks-touch-mousewheel-events%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered May 14 '13 at 2:45
ryandlfryandlf
8,7372685141
add a comment |
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
answered May 14 '13 at 2:45
ryandlfryandlf
8,7372685141
add a comment |
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
answered May 14 '13 at 2:45
ryandlfryandlf
8,7372685141
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
answered May 14 '13 at 2:45
ryandlfryandlf
8,7372685141
edited May 14 '13 at 2:52
answered May 14 '13 at 2:45
ryandlfryandlf
8,7372685141
answered May 14 '13 at 2:45
ryandlfryandlf
8,7372685141
answered May 14 '13 at 2:45
ryandlfryandlf
8,7372685141
8,7372685141
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f16472859%2fsvg-blocks-touch-mousewheel-events%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
That is a weird behavior, do the SVGs have any javascript embedded in them? Adding
object {pointer-events: none;}to your CSS should fix the issue in Firefox and Chrome (but not IE).– Duopixel
May 10 '13 at 17:04