JavaScript - scrollIntoView() only works in Firefox

Question

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

Seems like a [known fixed Chrome bug](https://chromium.googlesource.com/chromium/src/+/5d6edb4f084778cf635640c4fafd65418af841f7), not sure when you could expect to see this in production. — sheng, Nov 15 '18 at 15:54
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. https://caniuse.com/#search=scrollIntoView Edit: Look at this polyfill, don't know if it works for svgs: http://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 `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.](https://stackoverflow.com/a/51008191/2535504) — sheng, Nov 15 '18 at 16:33

JavaScript - scrollIntoView() only works in Firefox

0 Answers0