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).

Related Posts
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.

Managing Properties: A Brief Look at How We Handle Multi-Site SEO

Even the best UI and most brilliant designs need additional help in order to grow their user base. Our deep knowledge of search engine optimization (SEO) allows us to take the beautiful, functional website and ensure it is found by those who are looking for it.

Securing Your Site for Google Chrome 56

Google has announced that with Chrome 56, all non-secure pages containing password and credit card input fields will be marked as Not Secure in the URL bar. This warning could have a negative impact on your site by scaring off users who may not know any better.