Javascript - Smooth parallax scrolling with mouse wheel

After doing a lot of research, I found a pretty easy solution :) http://bassta.bg/demos/smooth-page-scroll/

Interestingly enough, I didn't have to alter my existing code at all. This overrides the default scroll behaviour, while leaving the event open for me to use like I would normally do.

EDIT: This is a really bad idea. Never ever hijack and override expected behavior. I guess I was overly fascinated with animations back then and overdid everything. Thankfully we all learn and expand our perceptions of good UX principles :)

This plugin for Chrome provides the functionality necessary for this. Someone created a gist with a minified version of it. It's from a pretty old version, but I think that's fine because, as I've checked, the latest version of the plugin adds too much stuff.

A couple things with that gist though:

• It checks if the browser is Chrome before initiating.
• It initiates automatically.
• It uses jQuery.

So I let myself create a version that addresses those points. Just add the script and call SmoothScroll.init() to start.

Scrolling using the mouse wheel requires special handling. Reason being each mouse wheel scroll doesn't scroll the content by a certain amount of pixels. Each scroll causes your page to jump and then each jump results in the "jumpy" jittery animation as the background image is trying to position itself at these jumps.

Using a library will solve the problem most of the time, but it is also worth understanding what problems it is trying to solve under the hood.

Just for reference sakes, the mouse events are mousewheel and DOMMouseScroll