Scroll Hijacking: I knew there was a reason I don’t do this

I hate scroll hijacking. You know, those sites where they steal your browser’s normal behavior and do weird things to it, like auto scroll you to sections or run animations instead of actually scrolling the site.

Sure sure, some of those things are pretty “cool”, but when you’re not trying to be on a Top Sites of the Day list, they’re pretty fucking annoying. They never work well with Apple’s magic mouse. Or touch devices. Or anything that’s not whatever the developer happens to use.

We got a project that wasn’t technically a “website” per se, but using web technology, and the content lent itself to a sort of slide-by-slide approach. So hey, we thought, let’s do a full height scrolly site that forces you to scroll from section to section, it will be great! Annoying to develop, but great!

Why oh why didn’t I listen to myself?

First of all, we were using ReactJS on the site, which meant the page never reloaded. Which means that any scrolly Javascript and all listeners must be destroyed and rebuilt for every “page”. No biggie, the plugin we found to use, FullPageJS, has a reinitialization method, so we’re all good.

Oh but we need those individual sections to actually scroll because the content is longer then the browser height.

And we need horizontal slideshows, and those also need to scroll.

Okay, okay but FullPage does all this stuff. Right?

Right?

Generally speaking, yes. But as you might expect, there were problems. The plugin that FullPage uses for the section scrolling, SlimScroll, has it’s own set of problems. The speeds for various input devices were all wrong. The magic mouse scrolling was WAY too sensitive, but when changed, made touch devices WAY too slow. The option for the scroll wheel speed were bound up in the touch device speed so I had to separate the two. Also, one must hover over the section for the scroll to start, which requires the mouse to move. In FullPage, you can essentially never move your mouse as you scroll section-to-section. So it seemed broken. I had to basically manually call mouseover() when the section has stopped animating into place.

SlimScroll initializes all scrolling sections when the page loads–before the images load.

facepalm

Which would be fine–if not responsive. So I had to set up a bunch of min heights. And of course the whole thing is in a CMS, so I don’t actually know how big the images will be, although in this case they are fairly consistent. So media query hell.

I don’t want to knock on these plugins specifically, because honestly this was by far the best option out there for our needs, and FullPage is being actively developed. We did have to hack into the plugin quite a bit to run with React, so running any updates would be a huge PITA.

We were also learning ReactJS for the first time with this project (and by “we” I mean not me), so there were other hurdles. But still. Scroll Hijacking: don’t do it, unless you only need to support Chrome with a trackpad. Then by all means.