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
Integrating WordPress with iMIS

Integrating WordPress with iMIS Association Management System: Strategies and Techniques In today’s digital age, it’s essential for associations and non-profit organizations to have an online presence that not only showcases their activities and initiatives but also provides a platform for members to interact and engage with each other. This is where integrating WordPress with iMIS […]

Introduction to Google Analytics 4: Understanding the New Features and Benefits

Google Analytics 4 (GA4) is the latest version of Google’s popular web analytics platform. With a host of new features and benefits, GA4 is designed to help businesses of all sizes better understand their customers and optimize their digital marketing efforts. In this article, we will take a closer look at the key features and […]

The Case for WordPress VIP

WordPress VIP is a premium hosting and support service offered by WordPress. It is specifically designed for large organizations and enterprises that require a high level of security, scalability, and performance for their websites. Is it the right fit for you? Here are some of the advantages of using WordPress VIP: Enhanced security: WordPress VIP […]