react-router-scroll
react-router-scroll copied to clipboard
Inconsistent scroll restoration behaviour on infinite loading components across browsers
trafficstars
summary
Encountered inconsistent scroll restoration behavior on infinite loading components wrapped with <ScrollContainer>, specifically across different browsers.
Steps to Reproduce
- Implement an infinite loading component that asynchronously loads data as the user scrolls.
- Wrap the component with
<ScrollContainer>to manage scroll positions. - Navigate to the component and scroll down to load additional content.
- Navigate away from the component.
- Navigate back to the component to trigger scroll restoration.
Observed Behavior
-
Google Chrome: The scroll position is forcibly restored to where the user left off. If additional data needs to be loaded to reach that scroll position, the component loads data asynchronously and the package restores the scroll repeatedly in a sync until the original leftoff position is reached.
-
Safari and Firefox: The scroll position is only restored once. If more data is required to reach the previous scroll position, the component does load the next set of data but scroll restoration does not happen again or in a sync.