ref scrollIntoView does not work with behavior smooth on react

Question

I am creating a component that will hold a dynamic list of elements and for styling reasons, I need to keep the title for each section in a sticky nav menu. As the user scrolls up and down the list of sections I need to apply styling rules and also bring the same section in the menu nav into view so I've tried using scrollIntoView with the menu section ref.

My inner workings and logic seem to work as expected, there is however an issue - unless I inspect or use a refresh on the page, the function for scrollIntoView does not execute on every state change

const scrollTo = (ref) => {
  ref.current.scrollIntoView({ behavior: "smooth", inline: "center" });
};

To keep things short I have added my workings into this codesandbox

Any help would be greatly appreciated as I've run out of ideas.

Thanks

Edit:

The scrolling behaviour seems to work as expected if I remove the "smooth" option in the behavior parameter from the scrollIntoViewOptions options. It does however look jumpy.

const scrollToMenu = (ref) => {
  ref.current.scrollIntoView({ inline: "center", });
};

Turino

Note that it works on firefox – Sandra

Cheers for that... Interested to know how to handle this in order to support the majority of major browsers. – Turino

I have the same issue on Chrome & Brave only, my scrollIntoView functions don't work AT ALL when I have behavior: smooth on. When I remove the smooth, it works but not a good user experience of course. Did you ever solve this? – Shire

Answer 1

Curiously, scrollIntoView() doesn't work when called synchronously, but in my case, putting it into a setImmediate() worked fine:

const scrollToMenu = (ref) => {
    setImmediate(() => ref.current.scrollIntoView({ inline: "center", }));
};

Infectious

Thanks for that, I don't understand why this work but it does. – Melodymeloid

Answer 2

In my case setImmediate() was not available but setTimeout() suited my purposes:

const scrollTo = (ref) => {
    setTimeout(() => ref.current.scrollIntoView({ inline: 'center', behavior: 'smooth' }), 777)
}

Aoristic

setting the delay to 0 worked for me. setTimeout(() => ref.current.scrollIntoView({ behavior: 'smooth' }), 0) – Baseler