Scroll to an element in a different, scrollable div in React using refs

Question

I'm looking to scroll an element to view when a callback is called in a separate div.

I'm following this thread which seems to work if the element is in the same div, but if the reference is to an element in a different div, is does not work.

React Sandbox: https://codesandbox.io/s/unruffled-carson-w8o46?file=/src/App.js

How can I achieve this?

Answer 1

You are trying to scroll the window, but you need to scroll the parent block. Inspect the elements through the developer tools and see.

const scrollToRef = ref => {
  ref.current.parentElement.scrollTo(0, ref.current.offsetTop);
};