Restore scroll position on infinite scroll page

Question

I have a website with an infinite scroll page, listing the newest ads. When user click on a preview of the ads it will redirect him to the product page.

But when user click on back button, it can not restore scroll position.

Note 1 : i will load 10 ads when scroll reach the end. So let say we have loaded about 50 ads and user change the page. When click on back button, it will reload the main page which is empty, then it just load the first 10 ads.

Note 2 : Im using react js and react-router and have tried to find a solution in the community already. As recently chrome support scroll restoration they didn't do much for that. But chrome doesn't support infinite scroll.

Internment

Answer 1

I generally consider infinite scroll to be an antipattern. If you use pagination instead, the browser's behavior is much more predictable.

But if you want infinite scroll w/ back button support, you have only got a few choices:

• Change the URL as the user scrolls such that the number of records is stored in the URL
• Store the number of records somewhere else (local storage / cookie)

When the user visits the infinite scroll page, restore the state based on the state you stored in the URL / local storage / wherever.

If I had to do this, I'd try to keep the data in the URL. But if done naively, there are serious flaws with these approaches. Someone malicious could make that number very large, in which case the browser(s) would download way too many records at once.

So, what I'd probably do is only fetch the window of records that matches what they would have seen at their previous scroll position. You can infinitely scroll below it and you can add a "load previous records" or something above it. That would prevent a back-navigation from fetching too many records at once.

Honestly, I think pagination is the answer.

Note, as commented below:

If you aren't concerned about keeping scroll position if the user leaves the site and navigates back, then you can keep the original page in memory (e.g. just hide it and then re-show it when the user navigates back).

Buckeen

Thanks @Christopher . Im already aware of using records number in the url. But its not what i want. Im sure there's a way to handle it without using URL. For example look at this website how its handling it divar.ir – Internment

In the case of that site, they are keeping the original page around in memory, as evidenced by refreshing when you drill into a product, then hitting back (the scroll position is lost). I had assumed you were talking about keeping scroll position when the user had navigated away. I'll update my answer accordingly. – Buckeen

Thanks... I managed to keep the page in memory and show it on back button pressed. – Internment

how do I do this for an angular app? I have a list of profile cards, I can't storei the page in local storage :( – Adventitious

I agree with infinite-scroll being an anti-pattern: it's convenient for content consumption but not for tracking, restoring, or for performance; is really bad for accessibility too. If one wants to have that convenience, they should implement a layer of scrolling but on top of a common pagination (with graceful degradation). – Selfassured

@FakhruddinAbdi so how did you manage to do it please ? thanks. – Huh

Answer 2

You can store your number with history.replaceState when it changes, and load it with history.state when your page loads.

Example with hooks:

const PAGING = 10
// initialize with memorized paging or default if none:
const [numAds, setNum] = useState((history.state && history.state.numAds) || PAGING)
// when scrolling down:
setNum(numAds + PAGING)
history.replaceState({numAds: numAds + PAGING}, '')

Tarratarradiddle

Answer 3

I think the easy way is you set some variable with true for default and only do a refresh and get more items if this variable is true, when you go to other page set to false and when you go back the items will be on state.

Constance