scrollbar stays at the top when infinite scrolling
See original GitHub issuehey, thanks for the great package!
i’m using infinite scrolling on the MessageList
component like this:
<MessageList
onYReachStart={loadMore}
loadingMore={networkStatus === NetworkStatus.fetchMore}
>
but when more messages are loaded, the scrollbar is still at the top of the container so it just keeps calling loadMore
over and over. ideally the behaviour would be something like this:
before onYReachStart is called:
message4 <-----scroll to here
message5
message6
after onYReachStart is called:
message1
message2
message3
message4 <-----scroll bar is here
message5
message6
so that only the next page of messages is fetched, rather than continually fetching more pages until you manually scroll down. hope that makes sense!
Issue Analytics
- State:
- Created 2 years ago
- Comments:24 (10 by maintainers)
Top Results From Across the Web
How to avoid scrollbar staying on top when loading more data ...
I'm making an infinite scroll up of the chat room, judging to see the last message and loading the data, but the scrollbar...
Read more >Infinite Scroll'ing the right way | by Phong Lam - Medium
For an infinite scroll, we use the top and bottom anchors to detect changes, whenever they intersect with our Root Element. The top...
Read more >How to implement infinite scrolling in Javascript - Educative.io
If the sum of scrollY and innerHeight is greater or equal to the scrollHeight , it means we have reached the end of...
Read more >Infinite Scrolling: When to Use It, When to Avoid It | Hacker News
One of the purposes of a scroll bar is to indicate how long (and/or wide) some piece of content is relative to your...
Read more >Element size and scrolling - The Modern JavaScript Tutorial
Setting scrollTop to 0 or a big value, such as 1e9 will make the element scroll to the very top/bottom respectively. Don't take...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@yevhen-logosha I have probably found what causes this behavior.
From what I have found the main problem is that onYReachEnd is fired on the first <MessageList /> render even when the content is smaller than component height and there is no scrollbar at all. This is caused by calling updateScroll method of ReactPerfectScrollbar in the ResizeObserver callback. This callback is fired the first time when a watched element is inserted into the DOM (The documentation says: “Observation will fire when watched Element is inserted/removed from DOM.”).
Now I need to find a way to prevent the updateScroll method from firing when the element is inserted. I need so time to make a fix. Probably tomorrow will try to deal with this, so please be patient it will definitely be fixed.
One more thing: onYReachEnd is fired three times in your repro because the Modal renders its own content three times.
@ryanalencar When do you call the API, is it in the onYReachEnd?