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", });
};

Cheers for that... Interested to know how to handle this in order to support the majority of major browsers. — Gareth Townsend
– Gareth Townsend, Commented Apr 4, 2022 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
– MLyck, Commented Jul 20, 2022 at 13:16

Jthorpe · Accepted Answer · 2022-08-09 20:21:21Z

7

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", }));
};

answered Aug 9, 2022 at 20:21

Jthorpe

10.3k2 gold badges55 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arthur Clerc-Gherardi Over a year ago

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

Blake Frederick · Accepted Answer · 2022-09-13 20:26:36Z

6

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

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

answered Sep 13, 2022 at 20:26

Blake Frederick

1,70023 silver badges32 bronze badges

1 Comment

Emmanuel Kasongo Mavetya Over a year ago

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

Collectives™ on Stack Overflow

ref scrollIntoView does not work with behavior smooth on react

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related