Scroll to index

Feature request

I have a list with a button that scrolls to the top of the list. The user can press the button any time, and when he does, the list should scroll to the top. The button may be pressed multiple times, the user may scroll in between. Each time, the list should scroll to the top.

The current workaround is to use the scrollToRow prop, and set it to 0 when the button is pressed. You then have to spy on the scroll position, and change the scrollToRow prop to undefined when the component has reached the correct scroll position.

I’m suggesting having a scrollToRow method instead, which would allow the following use case :

class Weeks extends Component {
  constructor(props) {
    super(props)
    auto_bind(this)
  }

  scroll_to_top() {
    this.list.scrollToRow(0)
  }

  render_week({key, index, style}) {
    return (
      <div key={key} style={style}>
        <Week week={index}/>
      </div>
    )
  }

  render() {
    return (
      <List
        height={height}
        width={width}
        ref={(list) => {
          this.list = list
        }}
        rowCount={100}
        rowHeight={row_height}
        rowRenderer={this.render_week}
        />
    )
  }
}

This is the same strategy as the React Native ScrollView component : https://facebook.github.io/react-native/docs/scrollview.html#scrollview

I can implement it if you give me the go-ahead.

(This issue is linked to this stack overflow question : http://stackoverflow.com/questions/41122140/how-to-scroll-to-index-in-infinite-list-with-react-virtualized/41126137?noredirect=1#comment69546597_41126137)

[kelly-tock]

is there a way to scroll a specific row by index number to the top of the scrollable area?

[codeclown]

@kelly-tock Yes (docs):

<List
  scrollToIndex={index}
  scrollToAlignment="start"
  ...
/>