Scrolljacking The Less Bad Way

Scrolljacking is generally a bad thing. And, like most bad things on the internet, it hasn’t gone away.

If you aren’t familiar with scrolljacking, it is the act of hijacking a user’s native scrolling capabilities. At best, it provides for a mildly unpleasant user experience. At worst, it’s the seventh circle of hell. It was made popular by Apple. Thanks, Apple.

However, there are some cases where it might be necessary in order to preserve a narrative. Recently, I was working on a project that involved a six- or seven-step narrative on a landing page. Each step was represented by a “slide” with animating content (done using an HTML canvas element). An example of what I’m referring to can be seen in the Code Pen below. Behold the power of scrolljacking:

See the Pen Crazy Awesome Canvas Animation by Ramsay Lanier (@ramsaylanier) on CodePen.0

In this example, the user just has to scroll a tiny bit and the “slide” changes. This is scrolljacking. In this case, we determined that by preventing the user from scrolling past the next slide, we could keep that narrative intact. It works, and it’s only mildly annoying. But there has to be a better way than this.

The Problems

First, users should be able to scroll at their own speed. This is the chief component of scroll jacking—hijacking the native scrolling speed and bending it to your will. However, we aren’t Sith Lords of web design; let’s use the force for good!

Second, users should be able to navigate through all of the content at their own leisure. Once the user has gone through the narrative for the first time, they should be able to scroll back up and down as they please. In the above example, this is simply not possible.

The (Less Bad) Solution

Behold, the less bad way to scroll jack:

See the Pen Scrolling sections with stops by Ramsay Lanier (@ramsaylanier) on CodePen.0

Technically, this might not even be considered scroll jacking. I’m simply assigning a height of 100vh to the next section once the previous section has been scrolled to. To prevent the fast scrolling, I’m wrapping the javascript that sets the CSS on the next section in a setTimeout function with a delay of one second. Pretty simple.

Check out the details — let me know if you have improvements, questions, comments, or virtual high-fives.

Also, before you get all “but what about mobile?” on me: I realize this is a dumbed down example.  The next step is wiring it up for swipe events so it works on touch devices. Also, I probably should add an onResize function to handle the resizing of elements if the layout changes (say from portrait to landscape).

Comments are closed.

Related Posts
Democracy Fund Launch

We are pleased to announce the launch of Democracy Fund. Through our partnership with Democracy Fund nclud provided: Digital Strategy Visual Branding Website Design WordPress Implementation Learn more about nclud at About Democracy Fund: Democracy Fund is an independent and nonpartisan, private foundation that confronts deep-rooted challenges in American democracy while defending against new […]

Digital Cartography: Making Maps in The Age Of the Internet

Have you ever wanted to build a map on the web? Learn how to using Leaflet.js

Game On: Using Gamification To Build Engagement

The American Society for Microbiology asked us to use our creative panache to add intrigue and dynamism to their annual conference. We responded by creating a game for the conference attendees: one that would introduce friendly competition, online engagement, and an underlying sense of urgency to the event.