JavaScript - scrollIntoView() only works in Firefox
0
I'm trying to scrollIntoView() on a SVG element. It works on Firefox as intended but on Chrome and Edge it scrolls down too far or some other place that is wrong.
<g id="clust1" class="cluster">
<title>cluster_Legend</title>
<polygon fill="none" stroke="black" points="8,-8 8,-59 2503,-59 2503,-8 8,-8"/>
<text text-anchor="middle" x="1255.5" y="-47" font-family="Times New Roman,serif" font-size="10.00">Node color legend </text>
</g>
I have a variable selectedCluster with the selected <g> element. I call scrollIntoView() on the <polygon> nested within the <g> element.
var polygon = selectedCluster.querySelector("polygon");
polygon.scrollIntoView({behavior: "smooth"});
How do I make it so that it scrolls correctly in Chrome and Edge?
Thanks
javascript html svg js-scrollintoview
asked Nov 15 '18 at 15:44
crypt555crypt555
35
|
show 1 more comment
0
I'm trying to scrollIntoView() on a SVG element. It works on Firefox as intended but on Chrome and Edge it scrolls down too far or some other place that is wrong.
<g id="clust1" class="cluster">
<title>cluster_Legend</title>
<polygon fill="none" stroke="black" points="8,-8 8,-59 2503,-59 2503,-8 8,-8"/>
<text text-anchor="middle" x="1255.5" y="-47" font-family="Times New Roman,serif" font-size="10.00">Node color legend </text>
</g>
I have a variable selectedCluster with the selected <g> element. I call scrollIntoView() on the <polygon> nested within the <g> element.
var polygon = selectedCluster.querySelector("polygon");
polygon.scrollIntoView({behavior: "smooth"});
How do I make it so that it scrolls correctly in Chrome and Edge?
Thanks
javascript html svg js-scrollintoview
asked Nov 15 '18 at 15:44
crypt555crypt555
35
Seems like a known fixed Chrome bug, not sure when you could expect to see this in production.
– Sheng
Nov 15 '18 at 15:54
Alright thanks, I guess I'll have to find a workaround.
– crypt555
Nov 15 '18 at 15:57
Try looking stuff up on caniuse first please. Like @ShengSlogar said, it's a known bug (in most major browsers actually), but only for the "smooth" option. caniuse.com/#search=scrollIntoView Edit: Look at this polyfill, don't know if it works for svgs: iamdustan.com/smoothscroll
– Josef Fazekas
Nov 15 '18 at 15:58
Bookmarked, didn't know of its existence. With the smooth option off I get the same result, it just snaps to the wrong place instead.
– crypt555
Nov 15 '18 at 16:01
Correct, smoothscrollIntoViewdoesn't have great support but that isn't related to your problem. You're probably better off just finding some way to finagle numbers and calculate your own scroll position. See this related answer.
– Sheng
Nov 15 '18 at 16:33
|
show 1 more comment
0
0
0
I'm trying to scrollIntoView() on a SVG element. It works on Firefox as intended but on Chrome and Edge it scrolls down too far or some other place that is wrong.
<g id="clust1" class="cluster">
<title>cluster_Legend</title>
<polygon fill="none" stroke="black" points="8,-8 8,-59 2503,-59 2503,-8 8,-8"/>
<text text-anchor="middle" x="1255.5" y="-47" font-family="Times New Roman,serif" font-size="10.00">Node color legend </text>
</g>
I have a variable selectedCluster with the selected <g> element. I call scrollIntoView() on the <polygon> nested within the <g> element.
var polygon = selectedCluster.querySelector("polygon");
polygon.scrollIntoView({behavior: "smooth"});
How do I make it so that it scrolls correctly in Chrome and Edge?
Thanks
javascript html svg js-scrollintoview
asked Nov 15 '18 at 15:44
crypt555crypt555
35
I'm trying to scrollIntoView() on a SVG element. It works on Firefox as intended but on Chrome and Edge it scrolls down too far or some other place that is wrong.
<g id="clust1" class="cluster">
<title>cluster_Legend</title>
<polygon fill="none" stroke="black" points="8,-8 8,-59 2503,-59 2503,-8 8,-8"/>
<text text-anchor="middle" x="1255.5" y="-47" font-family="Times New Roman,serif" font-size="10.00">Node color legend </text>
</g>
I have a variable selectedCluster with the selected <g> element. I call scrollIntoView() on the <polygon> nested within the <g> element.
var polygon = selectedCluster.querySelector("polygon");
polygon.scrollIntoView({behavior: "smooth"});
How do I make it so that it scrolls correctly in Chrome and Edge?
Thanks
javascript html svg js-scrollintoview
javascript html svg js-scrollintoview
asked Nov 15 '18 at 15:44
crypt555crypt555
35
asked Nov 15 '18 at 15:44
crypt555crypt555
35
asked Nov 15 '18 at 15:44
crypt555crypt555
35
asked Nov 15 '18 at 15:44
crypt555crypt555
35
asked Nov 15 '18 at 15:44
crypt555crypt555
35
35
Seems like a known fixed Chrome bug, not sure when you could expect to see this in production.
– Sheng
Nov 15 '18 at 15:54
Alright thanks, I guess I'll have to find a workaround.
– crypt555
Nov 15 '18 at 15:57
Try looking stuff up on caniuse first please. Like @ShengSlogar said, it's a known bug (in most major browsers actually), but only for the "smooth" option. caniuse.com/#search=scrollIntoView Edit: Look at this polyfill, don't know if it works for svgs: iamdustan.com/smoothscroll
– Josef Fazekas
Nov 15 '18 at 15:58
Bookmarked, didn't know of its existence. With the smooth option off I get the same result, it just snaps to the wrong place instead.
– crypt555
Nov 15 '18 at 16:01
Correct, smoothscrollIntoViewdoesn't have great support but that isn't related to your problem. You're probably better off just finding some way to finagle numbers and calculate your own scroll position. See this related answer.
– Sheng
Nov 15 '18 at 16:33
|
show 1 more comment
Seems like a known fixed Chrome bug, not sure when you could expect to see this in production.
– Sheng
Nov 15 '18 at 15:54
Alright thanks, I guess I'll have to find a workaround.
– crypt555
Nov 15 '18 at 15:57
Try looking stuff up on caniuse first please. Like @ShengSlogar said, it's a known bug (in most major browsers actually), but only for the "smooth" option. caniuse.com/#search=scrollIntoView Edit: Look at this polyfill, don't know if it works for svgs: iamdustan.com/smoothscroll
– Josef Fazekas
Nov 15 '18 at 15:58
Bookmarked, didn't know of its existence. With the smooth option off I get the same result, it just snaps to the wrong place instead.
– crypt555
Nov 15 '18 at 16:01
Correct, smoothscrollIntoViewdoesn't have great support but that isn't related to your problem. You're probably better off just finding some way to finagle numbers and calculate your own scroll position. See this related answer.
– Sheng
Nov 15 '18 at 16:33
Seems like a known fixed Chrome bug, not sure when you could expect to see this in production.
– Sheng
Nov 15 '18 at 15:54
Seems like a known fixed Chrome bug, not sure when you could expect to see this in production.
– Sheng
Nov 15 '18 at 15:54
Alright thanks, I guess I'll have to find a workaround.
– crypt555
Nov 15 '18 at 15:57
Alright thanks, I guess I'll have to find a workaround.
– crypt555
Nov 15 '18 at 15:57
Try looking stuff up on caniuse first please. Like @ShengSlogar said, it's a known bug (in most major browsers actually), but only for the "smooth" option. caniuse.com/#search=scrollIntoView Edit: Look at this polyfill, don't know if it works for svgs: iamdustan.com/smoothscroll
– Josef Fazekas
Nov 15 '18 at 15:58
Try looking stuff up on caniuse first please. Like @ShengSlogar said, it's a known bug (in most major browsers actually), but only for the "smooth" option. caniuse.com/#search=scrollIntoView Edit: Look at this polyfill, don't know if it works for svgs: iamdustan.com/smoothscroll
– Josef Fazekas
Nov 15 '18 at 15:58
Bookmarked, didn't know of its existence. With the smooth option off I get the same result, it just snaps to the wrong place instead.
– crypt555
Nov 15 '18 at 16:01
Bookmarked, didn't know of its existence. With the smooth option off I get the same result, it just snaps to the wrong place instead.
– crypt555
Nov 15 '18 at 16:01
Correct, smooth
scrollIntoView doesn't have great support but that isn't related to your problem. You're probably better off just finding some way to finagle numbers and calculate your own scroll position. See this related answer.– Sheng
Nov 15 '18 at 16:33
Correct, smooth
scrollIntoView doesn't have great support but that isn't related to your problem. You're probably better off just finding some way to finagle numbers and calculate your own scroll position. See this related answer.– Sheng
Nov 15 '18 at 16:33
|
show 1 more comment
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53323033%2fjavascript-scrollintoview-only-works-in-firefox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53323033%2fjavascript-scrollintoview-only-works-in-firefox%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
Seems like a known fixed Chrome bug, not sure when you could expect to see this in production.
– Sheng
Nov 15 '18 at 15:54
Alright thanks, I guess I'll have to find a workaround.
– crypt555
Nov 15 '18 at 15:57
Try looking stuff up on caniuse first please. Like @ShengSlogar said, it's a known bug (in most major browsers actually), but only for the "smooth" option. caniuse.com/#search=scrollIntoView Edit: Look at this polyfill, don't know if it works for svgs: iamdustan.com/smoothscroll
– Josef Fazekas
Nov 15 '18 at 15:58
Bookmarked, didn't know of its existence. With the smooth option off I get the same result, it just snaps to the wrong place instead.
– crypt555
Nov 15 '18 at 16:01
Correct, smooth
scrollIntoViewdoesn't have great support but that isn't related to your problem. You're probably better off just finding some way to finagle numbers and calculate your own scroll position. See this related answer.– Sheng
Nov 15 '18 at 16:33