Infinite Scroll v3 un-breaks the back button

12 Jul 2017

All new Infinite Scroll upholds URLs by changing them as you scroll. It's back button & refresh button friendly. I'm delighted to have finally resolved this big pain point.

Backstory

Infinite Scroll works by adding the next page to the current page. This behavior allows users to continue browsing the site, without having to be disrupted with a full page load. But it came at a cost. By adding in new pages, the page content would not match up with the page URL. Although you would looking at content from example.com/page/4, the browser URL would still be on example.com.

This URL mismatch broke how browsers should work. When a user would re-visit an infinitely-scrolled site, their position would be on the first page, not where they previously were. It broke both the back button and the refresh button. Several developers have addressed this problem over the years:

Resolution

Infinite Scroll v3 resolves this issue with the HTML5 History API. Infinite Scroll keeps track of where new pages are located. As you scroll, Infinite Scroll will use replaceState to update the URL to match the current page. When you scroll down from the home page example.com to example.com/page/2, the URL will change to match. And if you scroll back up to example.com, the URL will change back. This feature is enabled by default with the history option.

Try out the full page demo and watch the URL.

This new feature allows users to maintain their scroll position. They can hit the refresh button or visit other pages and hit back. They'll end up back on the page where they left off and you can start scrolling again. This behavior is enabled by another new feature of Infinite Scroll v3: starting from subsequent pages (not just from page 1, but page 2, 3, ...).

Infinite Scroll is so old that the History API didn't actually exist when it was in development years ago. Upholding URLs brings Infinite Scroll back to former glory as a first-class plugin.