Animating .scrollTo() / .scrollToIndex() ❓

Hi there 😃

Thanks for this great lib!

I’m experimenting with it and I wondered whether it’s somehow possible to animate the scrolling behavior (“smooth scroll”) when using scrollTo() / scrollToIndex()?

[petrsuhin-al]

Just add to your global or component styles:

.List {scroll-behavior: smooth;}

IMHO, the simplest and most elegant solution, I don’t understand why no one suggested it

[gauthamchandra]

This is easier to do with the outerRef prop which gives you a reference to the scrollable div.

You could then use that in combination with the standard Element.scrollTo() API.

So it would something along the lines of this:

export default VirtualizedList extends React.Component {
   constructor() {
     this.listRef = React.createRef();
     this.scrollableContainerRef = React.createRef();
   }

  scrollTo(scrollOffset) {
    // note that my list is vertical which is why I am feeding this to the "top" prop.
    this.scrollableContainerRef.current.scrollTo({ 
      left: 0, 
      top: scrollOffset,
      behavior: 'smooth',
    });
  }

  render() {
    <List 
      ref={this.listRef}
      outerRef={this.scrollableContainerRef}
      layout="vertical"
      ...
  }
}

NOTE: I removed all the extraneous code and props above to keep things brief.