8

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", });
};
Gareth Townsend
  • 119
  • 2
  • 8
  • Note that it works on firefox – Monstar Mar 30 '22 at 20:07
  • Cheers for that... Interested to know how to handle this in order to support the majority of major browsers. – Gareth Townsend Apr 04 '22 at 14:01
  • 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? – MLyck Jul 20 '22 at 13:16

2 Answers2

4

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", }));
};
Jthorpe
  • 9,756
  • 2
  • 49
  • 64
3

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

const scrollTo = (ref) => {
    setTimeout(() => ref.current.scrollIntoView({ inline: 'center', behavior: 'smooth' }), 777)
}
Blake Frederick
  • 1,510
  • 20
  • 31