Is there a simple way to animate a scrollable div from positionA to positionB?

Question

I'm using the react-virtualized List within a functional component. It allows you to set a ref for the scorllable list div. I have an onScroll function that is currently capturing the scrollTop position of the scrolled list and storing it in fromPosition I also have a variable storing the toPosition I want to scroll to.

Does anyone have a clean way of enabling the List component to scroll from the fromPosition to the toPosition in a smooth animated way... and triggered when ever a certain piece of state changes (triggerVar)?

This answers your question https://stackoverflow.com/questions/44375093/handling-scroll-animation-in-react — Constantin, Oct 31 '20 at 16:30

score 0 · Answer 1 · answered Oct 31 '20 at 16:34

You can use the scrollTo method and achieve smooth scrolling by setting behavior to smooth.

listRef.current.scrollTo({ 
  top: toPosition, 
  behavior: 'smooth' 
})

You don't really need the fromPosition because scrollTo will scroll from the current position of the scroll.

Is there a simple way to animate a scrollable div from positionA to positionB?

1 Answers1