A Note on Scrolljacking

We are scrollers.

The average person scrolls the height of a 7-floor building each day on their phone. Add the scrolling we do on our computer at work—through emails, messages, spreadsheets, articles, etc.—and it’s a wonder we have time for anything else. In fact, I bet you’re scrolling right now.

There are several ways to scroll a webpage, but they all work pretty much the same way. Whether you’re tickling a trackpad, manipulating a mousewheel, or smearing your finger up a rectangle of glass—you know what to expect:

  • Scrolling a little moves the page a little.
  • Scrolling a lot moves the page a lot.
  • Scrolling slowly moves the page slowly.
  • Scrolling quickly moves the page quickly.

Simple expectations that get reinforced with each new site we visit.

However, it’s possible (with javascript) to decouple the act of scrolling from directly manipulating the page up and down, and reuse it for something else. This practice of hijacking the scroll is often portmanteau-ed as “scrolljacking”. Instead of moving the page normally, scrolling could be used for any number of other effects:

  • fading elements in and out
  • moving elements across the screen
  • automatically jumping to predefined sections of the page
  • etc.

As museums and other story-centric organizations seek to make their websites more “immersive” or “experiential”, the temptation to scrolljack is real. It’s an easy way to create something that feels fancy and delightful on the surface. A fun departure from the norm. But there are deeper tradeoffs that must be considered.

On a scrolljacked page, users are forced to adjust their expectations for how the page works—and the first emotional threshold they step through is confusion. I only scrolled a little. Why did the page jump so far? Experimentation is necessary to try to understand the scrolljacked page’s physics.

Try it with me. Visit this scrolljacked homepage. Can you master scrolling it, so that it does exactly what you want it to do at all times?

If you’re using a phone or other touch device, notice what happens when you start to drag your finger. Nothing! Even though the page should be moving with your finger. It only moves once you release your finger from the device.

If you’re using a mouse, can you quickly move through the page? Were you ready for all of the content to change completely even though you scrolled just a little?

I use a trackpad on my laptop. Let me walk you through my experience:

  • The site loads.
    Nice typography—let’s see what the rest of the site is about.
  • I scroll down.
    Woah, the whole page moved. Looks like they’re scrolljacking. No worries, I’m pretty sure scrolling down will just advance to the next section. Simple enough.
  • I scroll down.
    Nothing happened. Maybe I didn’t scroll far enough?
  • I scroll down a lot.
    There we go, that moved it to the next section.

Now the real question: How much have you engaged with the content at this point? I realized I hadn’t read anything at all yet, and tried to go back to the top to start over. However, moving back up the page had its own unique mechanics to discover.

Tedious, right? It’s almost like an invisible barrier preventing engagement with the content.

Imagine if a museum suddenly prohibiting walking around freely—and instead, visitors had to clamber into little trains that whizzed around through galleries and exhibits without stopping. Some visitors would love the experience. Trains are fun! But will they have experienced the museum, or learned anything new? Likely not.

At the end of the day, a website is just a vehicle for the content it serves. As creators of digital experiences, we have to ask ourselves—are we placing train tracks instead of building open spaces? Are we emphasizing technique over content? How else are we scrolljacking our visitors’ experiences—metaphorically or otherwise?