question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ScrollToIndex not scrolling as expected

See original GitHub issue

I’ve created a small repro based on what we’re experiencing trying to make use of <List />'s scrollToIndex prop. I believe it’s a bug, given how simple the repro is and how closely we’ve attempted to follow documentation / examples, but it’s always possible we’ve just mixed something up.

What is the current behavior?

  1. Clone the repro here
  2. Build and start the app (I’ve been using recent version of Chrome)
  3. Enter a number between 0 and 999 in the number input at the top of the screen

Despite the scrollToIndex state in <App /> being updated, which feeds down to the <List />'s scrollToIndex prop, the list is not navigated to the desired list element as expected.

What is the expected behavior?

The element at the index given in the number input box is navigated to.

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

Browser Chrome v69.0.3497.100
OS Windows 10
React 16.5.2
React DOM 16.5.2
react-virtualized 9.20.1

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:2
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
Uneedcodecommented, Jun 9, 2020

I have the same bug. so bad

4reactions
KaySackeycommented, Oct 8, 2018

I’m using this currently as a workaround. It’s pseudo-code that I extracted from a much larger file, but it’s a start on a workable solution.

    componentDidMount(){
        if (this.props.start_index < 0) {
            return;
        }

        const initial_top = this._list_ref.getOffsetForRow({
            alignment: "start",
            index: this.props.start_index,
        });
        
        window.scrollTo(0, initial_top);
    }
    
    render(){
        return (
            <List ref={ref => this._list_ref = ref} {...other_props} scrollToIndex={this.props.start_index}/>
        )
    }

Basically it manually calls getOffsetForRow after mounting, then scrolls the window the correct location. The scrollToIndex prop is still required, or else the List component will not render the correct rows initially.

I have been using this with WindowScroller, so I have no idea if it works solo as WindowScroller does things like patch the scrollTop.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ScrollToIndex does not scroll the FlatList as expected
It seems no scrolling action is taking place. This is an expo project with "sdkVersion": "33.0.0" and React and RN as follows from...
Read more >
React Native FlatList scrollToIndex with Fixed or Variable Row ...
In this video, I show you how to use the scrollToIndex function to scroll to a row with a certain index in a...
Read more >
React native scrollview cannot scroll to bottom
React Native ScrollView is not scrolling (we think the issue is not with the ... scrollToIndex() scrollToIndex((params: object)); Scrolls to the item at...
Read more >
Building a Smooth Image Carousel with FlatList in React Native
Users can scroll through items by dragging across right or left to ... The <FlatList /> component's reference comes with a scrollToIndex ......
Read more >
FlatList - React Native
Footer support. Separator support. Pull to Refresh. Scroll loading. ScrollToIndex support. Multiple column support. If you need section support, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found