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