Website Infinite scrolling - return scroll position after user 'go back' in browser

Question

Quite often on pages with infinite scroll you might face scenario:

• you're scrolling a lot,
• then you click some link from inifinite list,
• you dont like what you've clicked
• so you go back
• you'd like to continue scrolling from the point you've left.
• but all items you were scrolling are not there and you need to scroll everything you've already seen again.

How do you handle those situations? Do you know any solution for that? Is there any way to save state of page or at least know what this situation was and load proper ammount of infinite list and scroll user to last seen item.

Answer 1

This is a fairly unspecific, open-ended question, but let me share some thoughts:

• One reason the page you're returning to is reloading (and thus resetting) is because it prohibits the browser from caching it. If the page containing the scroll doesn't absolutely have to have pragma:no-cache etc etc, then try without. This may already solve the problem, because the browser is allowed to return to the last known state.

• If this doesn't work or you need to make sure you have fresh data on each page load, then the solution will depend on your content and your framework. Maybe you can store the state server-side in the session and rebuild the page accordingly, or you can set a cookie with a reference and let some client-side script poll up to that point when you reload.

• Other than that, all I can say is that most infinite scrolling frameworks simply say "well, this is a problem", period. An alternative would then be to use explicit pagination.

Answer 2

While scrolling when a certain condition is true the new content to be appended to the page has to be loaded somehow, for example you call some page with an ajax call. Let's say every time you load more data you load ten items. So your current state could be the amount of times you loaded 10 more items. You could save that information e.g. by using an anchor:

www.site.tld/index.php?id=999#load_counter=5

Another possibility would be to save it with cookies. You could try at which time the "saving" of that data is the best. E.g. after every AJAX call or when leaving the page using the onbeforeunload event.

When your page is loaded you can check if there is that kind of metadata available in the cookie or the url. If there is you can load exactly that content either by sending an AJAX request that loads the list elements that where loaded before. In my example this would be

5 * 10

because the load_counter is 5 and on every load there were loaded 10 more items. You also can reconstruct the position. Either by also saving that information of how much the user has scrolled or by just guessing assuming that the user was looking at the last bulk of loaded items. E.g. you could scroll to the element (5-1)*10. That's the first element of the last bulk.

Answer 3

This is a very generic approach and will need customization depending on what kind of front-end framework is being used.

scrollTop maintains the vertical scroll position, so if you find a way to memoize scrollTop, you can always come back to the same position where you last left.

// get reference to your scrollable div
const element = document.getElementById("scrollableDiv");

// store element.scrollTop in local storage.
windows.localStorage.setItem('scrollTop', element.scrollTop);

// get scrollTop value once back to the previous page
const scrollTop = windows.localStorage.getItem('scrollTop')

// apply scrollTop to your scrollable div, to take scroll thumb to the exact position where it was left before
document.getElementById("scrollableDiv").scrollTop = scrollTop;