10 years of Infinite Scroll

I’ve been working with Infinite Scroll experiences for almost 10 years now. The first time was in December 2010, when I published the first commit of an open-source Magento 1 Infinite Scroll extension — that would become one of the most used Infinite Scroll extensions for Magento 1 with thousands of installations worldwide. Back then, Pinterest was making big waves with their fancy user-experience.

Five years later Magento 2 had just been released and we open-sourced a new Infinite Scroll extension for the new platform. It now has 64,600+ downloads and 33+ forks.

In this series I’ll share a few things I learned about the “Infinite Scroll experience” in general — the good, the bad, and everything in between.

The Bad

There’s a lot great about Infinite Scroll, and that’s where I’d normally like to start. But unfortunately I can’t put time on that right now.

However, I recently answered a support ticket in our Magento 2 extension about a challenge we currently simply don’t know how to properly solve.. So I wanted to share that here:

The “Infinite Upwards Scroll” Can of Worms

What find really interesting about this feature is that at first it seems very intuitive and simple, even sexy — but it turns out it’s just a big can of worms! If you’re a bit into UX I’m sure you’re going to enjoy this one.

I’ve know about this challenge since the early beginnings, but I never really explained it properly to anyone. I’m sure others already have elsewhere, but this is my personal take on it.

The feature we’re considering is essentially the reverse of Infinite Scroll:

Let’s say we click on a link (on a blog) that makes us land directly on page #20 out of 30 pages. We’d like that when we scroll upwards the previous pages are loaded automatically into view until the first page is reached.

– quite simple, right?

This is a feature someone may “think” they want, but I think once they experience they’d actually pretty much hate it. Here’s why:

1. Maybe you’d like to run a new search, but then suddenly you find out it’s hard to get to back the header of the page! As soon as you scroll up, more products are added on top. Additionally, you can’t get to the bottom of the page either, so you’re essentially “trapped” in an infinite scroll in both directions and the only way out would be to click on a product. Ouch!
2. Even if you manage to get to the top of the page, you’d would have to be quite dexterous to click on a link there before the “previous” page gets inserted at the top and the header gets pushed out of view again.
3. Even if we allow getting to the very top easily and we try to avoid the header getting pushed up again out of view, it would mean making sure the previous page gets inserted in a way that the content gets pushed “down” without scrolling the view — and in that case that would auto-trigger another request to load the previous page (18), and then immediately another for page 17, etc, until all 18 previous pages are loaded in quick succession – making the items on page 18 you might interested in be quickly pushed downwards further and further out of your reach.

The only “viable” solutions to this feature I can think of would be to:

1. Use a “sticky header” plus some very smart JS that would allow the user to scroll up a bit more, just enough to trigger the previous page-load. This would make all themes that don’t have sticky headers immediately incompatible with this feature.
2. Or add a button that the user has to click to “load previous page”. But then that’s almost the same as having pagination controls at the top, right? 🤷‍♂️

Either of those “viable” solutions have their own drawbacks and it begs the question: is this feature even worth the effort? I personally think not, but I understand many people would still want it. However, simply due to it’s divisive nature and the fact that the implementation would be too “opinionated” (i.e. only work on themes with sticky headers), I think it’s not a good fit for an extension that’s supposed to be dead-simple and work pretty much “out of the box”. So that’s why we don’t have this feature in our Infinite Scroll extensions.