Infinite Scroll Breaks the Back Button
But there’s an easy fix!
In many ways, web usability is at an all-time high, provided you’re using a modern browser. However, something that’s become quite common over the past few years is an infinite scroll mechanism, in which additional content is loaded in the bottom of the current page rather than requiring the user to navigate to a next page of content.
This greatly speeds up browsing by removing the overhead of loading the styles, scripts, headers, etc. for each additional page of content. But in most implementations, it totally breaks the back button! I click a link to view details for a piece of content, press the back button to choose another, and I’m forced to load several pages of content by either clicking a button or scrolling which is incredibly less usable than a separate page for each chunk of content.
I’ve coded up an example of how I think this should work.
This simple solution fixes my back button and lets us keep our fast infinite-scrolling web apps. Win-win.
Technical Note: Putting the “page number” in the hash is a bad idea — content changes quickly. Using some type of GUID is a much better approach — I found a GUID based on the bottom-most item works well and ensures the same screenful of content no matter how many new items have been added to the top of the list.