Disable scroll restoration for paginated queries?
How do I handle this scenario?
1. User scrolls to the bottom of page 1 and clicks the next page button.
2. Page 2 loads but the scroll position is at the bottom (instead of the top).
This is jarring for the user. How do I make their scroll position change to the top when they load a new page?
2 Replies
absent-sapphire•3y ago
I might be wrong but I'm not sure there is a way to "disable" scroll restoration. My understanding is that scroll restoration is more a side effect of data being served instantly from the cache (or using
keepPreviousData when switching page), rather than an actual feature (see
https://tanstack.com/query/v4/docs/react/guides/scroll-restoration).
One possible way to fix your issue would be to call window.scrollTo(0) when the next page button is clicked.Overview | TanStack Query Docs
React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze.
Motivation
metropolitan-bronzeOP•3y ago
@julien Thank you, both of your ideas worked well. I found that doing a scrollTo when the data changes, while keeping previous data, was optimal. Much appreciated.