Javascript - Smooth parallax scrolling with mouse wheel

Question

I have a page where I\'m applying a parallax effect. This is accomplished using translate3d. Now, while this works well, I\'m wondering how I can override the default \"step

Answer 1

Edit: While testing I figured out this has a significant bug. While my version behaves (in my opinion) tremendously better than the original code, it unfortunately does not account for scrolling by other means (scroll bar/middle click and drag). Scrolling by one of these methods and then scrolling with the mouse wheel causes it to revert to wherever scroll location you were at when you last scrolled the mousewheel. I'll update when I develop a solution to this.

Kenny's referenced solution was a fine approach, but it's functionality drove me crazy. If you scroll the wheel quickly it wouldn't scroll much faster.

I improved it such that you scroll a given distance per click regardless of mouse wheel spin speed.

The reason his answer did not is because if you scroll the wheel a second time before the first animation is complete the new scroll to height is only the current scroll height plus however much it scrolls per wheel click. (So if scroll time is .5 seconds and you scroll a second time after .25 seconds then it will scroll 1.5 times the wheel scroll distance instead of 2 times that distance)

It's late at night, I hope that makes sense.

Regradless here's my code:

Required libraries

Scroll code