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.
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
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:
- Screw Hashbangs: Building the Ultimate Infinite Scroll - Alex Micek
- Infinite Scroll + HTML5 History API - Kyle Kneath
- Infinite Scrolling that Works - Robin Ward
- Issue #337 - Scrolling progress should be persisted
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/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
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.