在无限滚动页面上恢复滚动位置

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.

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 (eg just hide it and then re-show it when the user navigates back).

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}, '')

Answer 3

我认为最简单的方法是您将一些变量设置为默认值为 true，如果此变量为 true，则仅进行刷新并获取更多项目，当您转到其他页面设置为 false 时，当您返回时，项目将处于状态。