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.

scrollbar stays at the top when infinite scrolling

See original GitHub issue

hey, thanks for the great package!

i’m using infinite scrolling on the MessageList component like this:

  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

after onYReachStart is called:

message4 <-----scroll bar is here

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:open
  • Created 2 years ago
  • Comments:24 (10 by maintainers)

github_iconTop GitHub Comments

supersnagercommented, Apr 15, 2021

@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.

supersnagercommented, Nov 16, 2022

@ryanalencar When do you call the API, is it in the onYReachEnd?

Read more comments on GitHub >

github_iconTop 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 -
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 >

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 Post

No results found

github_iconTop Related Hashnode Post

No results found