Please Stop Hijacking Our Scroll Wheels

Web developers are no strangers to hijacking regular browser functions in order to do something they consider “cooler”. Overall, this is probably a plus; without overriding regular browser functions, modern website functionality we take for granted today (for example, Single Page Applications) wouldn’t be possible. However, this ability has also been turned towards more insidious applications — namely, hijacking the scroll wheel to do “cool” animations and other actions.

What am I talking about? Just take a look at Apple’s product pages. Try scrolling. The function of the scroll wheel bounces around all over the place. Is it playing an animation? Scrolling the actual page? No, wait — now it’s changing the background. Oh, wait, it’s scrolling again. The scroll wheel just won’t stay put. The end result? The page is extremely hard to navigate — look at how much you have to scroll to get to the bottom of the page:

Just look at the size of that scrollbar!

Those who have followed web design for a while might know that this problem is not exactly new — the problem has existed for years, with multiple other voices loudly complaining about the usability nightmare it poses.

But if web designers have known about the problem for years, then why does it still exist?

It mainly comes down to web designers over-designing in order to make a website look edgy and cool. The product page above is a classic example of this; in an effort to replicate the slick in-your-face editing shots of the Apple commercials, the product page takes the scroll wheel and throws its regular function out of the window, using it to play through a bunch of in-your-face animations and changes.

Apple, of course, is not the only offender in this design trend; countless websites use some form of scroll-jacking, ranging from simple full-page scrolling to using the scroll wheel to play through all sorts of fancy animations and effects. However, just because a lot of websites use scroll-jacking does not make it a good practice.

Seriously, don’t do it.

Need some reasons? Let’s discuss a few:

Intuitiveness

This is probably the most important issue in regard to scroll hijacking — and, to be honest, UX design in general.

When we use a function, we expect the function to do what we expect it to. In the case of the scroll wheel, that’s scrolling. If the page doesn’t scroll when the user scrolls, it creates a break between what the user expects and what the page does; this leads to an unintuitive interface that feels cumbersome and confusing to navigate.

Different scroll hijacking methods violate this rule to different degrees; for example, most simple full-page scroll websites are relatively unobtrusive, simply making the site scroll screen-by-screen instead of the regular behavior. Therefore, if you really really want some full-page scrolling, it’s OK to implement, as long as it doesn’t disrupt the user experience too much. Which brings me to my second point…

Consistency

Some websites allow you to scroll naturally at first, but then decide halfway down the page that it wants to take control of your scroll wheel.

Please don’t do this.

If you’re going to change the scroll wheel functionality, change it in a consistent manner — don’t have a section that scrolls naturally and then suddenly transitions into full-page scrolling, or vice versa. If you’re going to scroll-jack, do it all the way. A sudden change in the function of the scroll wheel is jarring and distracting.

Navigability

Is that a word?

Doesn’t matter — the point is that on a page, being able to navigate up and down the page is essential. Scroll hijacking interferes with this (although, again, some methods affect UX less than others). Full-page scrolling, for example, limits the rate at which you can scroll to a constant animation speed, making it frustrating to scroll to the bottom of the page. On the other hand, scrolling tied to animation a la Apple leads to unreasonably long scroll bars, forcing you to partake in a forced 100 meter scroll race to get to the bottom. Either way, changing the scroll functionality will inevitably lead to some issues with site navigation, ranging from mildly annoying to downright unusable.

Summary

TL;DR: The best option is to just leave the default scrolling in place. You probably don’t need scroll hijacking.

If you’re really, really sure that you do want to change the scroll functionality of your site, consider these few tips:

• Be consistent about it. If you’re changing the scroll functionality, make sure it does one thing only; don’t transition between natural scrolling and full-page scrolling.
• Keep your site navigation in mind. Try and control the size of your scrollbar, and if you’re using full-page scrolling, don’t set the animation speed to an unbearably slow pace.
• Avoid tying scrolling to animation. Not only is this unintuitive, but it also doesn’t even look that good — for instance, on a desktop, some scroll wheels only scroll a chunk at a time, which means that the animation will play, pause, then play in fits and starts as the user scrolls down the page. A better solution may be to implement a sort of full-page scrolling for animations — instead of tying the entire animation to the scroll wheel (which leads to the animation starting and stopping), the animation simply plays when the user scrolls past a certain threshold, in order to transition between two screens. (Note: we’re talking here about animations tied to scroll positions a la Apple website; animating elements on scroll-in is fine.)

Thanks for reading!