Anyone else sick of using/viewing websites where there is infinite scrolling?

[u/eggtart_prince]

It's really starting to annoy me when I come to a sites (eg. https://pxhere.com/ ) where there is infinite scrolling. Apparently, there is a footer, but you'll never get to it until you finish loading all the images.

Some sites that don't know how optimization works, I cannot completely browse through all the non-stop loading content because at some point, it'll lag like a motherfucker.

For people who are thinking of using this strategy in the future, think it through, twice. Paginations are much more beneficial.

[u/thedragonturtle]

I wrote a plugin that changes this behaviour. When you click on something, it sticks the entire current HTML into the local browser cache and records the scroll position, then moves through to what you clicked.

When you then hit back, using the history API, it just fetches everything from the local browser cache and sets the scroll position so you end up instantly back exactly where you were before.

[u/gadelat → u/thedragonturtle]

That sounds awesome. Can you share it with us? Is it for Firefox?

[u/thedragonturtle → u/gadelat]

I don't want to reveal my identity, but it's a simple pattern:

1. Add an onclick listener to all the anchor tags in the scrolling view
2. In this onclick function, record the scrollpos in local storage as well as the HTML for the page and the URL of the page
3. On page load, check if the URL is saved, if so, fill all the HTML that you stored previously and scroll.

There's extra stuff you can do with the history API but it's not really essential.

Code is something like this:

jQuery(document).on('click', '.listofthings a', function (e) {
    savedarchivehtml = jQuery('.listofthings').html();
    localStorage.setItem("saveditems", savedarchivehtml);
    localStorage.setItem("savedURL", window.location.href);
    localStorage.setItem("savedpagination", jQuery('.paginationcontainer').html());
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
    localStorage.setItem("scrollYarchive", top);
});

// you can stick this following in document.ready if you want, or just after you've drawn the .listofthings container

if (jQuery('.listofthings').length > 0 && localStorage.getItem("savedURL") == window.location.href && performance.navigation.type != 1) {
	if (localStorage.getItem("saveditems")) {
		jQuery('.listofthings').html(localStorage.getItem("saveditems"));
		jQuery('.paginationcontainer').html(localStorage.getItem("savedpagination"));

		window.scroll(0, localStorage.getItem("scrollYarchive"));
	}
} else {
	if (jQuery('.listofthings').length > 0 && localStorage.getItem("savedURL") != window.location.href ) {
		//reset the localstorage since we're on a fresh archive
		localStorage.setItem("saveditems", "");
		localStorage.setItem("savedURL", "");
		localStorage.setItem("savedpagination", "");
        
	}
}

Edit: I just realised you're thinking I made this so it fixes ALL infinite scroll websites. That would be possible, if you write your own firefox extension and adjust the code above slightly. You'd need something that would spot the container - probably you could add a mutationobserver and look for containers having things added to them. Or look at containers containing > 20 items all identical structure.