Adjust the scroll speed of the window

Question

I searched everything, but it seems I can’t find a way to how I can achieve this, so here. I am trying to adjust the scroll speed to deviate from the default browser speed. Thus, scrolling will be faster / slower than usual.

I tried doing things with $(window).scrollLeft() , but this doesn’t quite work for me. Does anyone know of any way to do this in Javascript or jQuery?

Thanks:)

Note : I'm not looking for parallax effect;)

Answer 1

Here is a quick JavaScript class that I threw together "AugmentScroll". In the onload / document ready event window, simply enter an instance of the class and it will change the scroll behavior. It uses an interval timer and a window scroll event. Hope this helps you get started. It works in the latest versions of Chrome and FF, as well as in IE9. The Advanced / General "scrolling" option in FF allows you to spoil it a bit.

 window.onload = function() { function AugmentScroll(type /* slowest|slower|slow|fast|faster|fastest */) { this.oldX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0; this.oldY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0; this.deltaX = 0; this.deltaY = 0; this.busy = false; this.multiplier = 0; switch(type) { case 'slowest': this.multiplier = -0.9; break; case 'slower': this.multiplier = -0.5; break; case 'slow': this.multiplier = -0.2; break; case 'fast': this.multiplier = 0.2; break; case 'faster': this.multiplier = 0.5; break; case 'fastest': this.multiplier = 1.0; break; case '2x': this.multiplier = 1.0; break; case '3x': this.multiplier = 2.0; break; case '4x': this.multiplier = 3.0; break; case '5x': this.multiplier = 4.0; break; default: break; } window.addEventListener("scroll", this.OnScroll.bind(this), false); window.setInterval(this.OnUpdate.bind(this), 100); }; AugmentScroll.prototype.OnScroll = function() { if(this.busy) { this.busy = false; } else { var x = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0; var y = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0; this.deltaX = x - this.oldX; this.deltaY = y - this.oldY; } return true; }; AugmentScroll.prototype.OnUpdate = function() { var dx = this.deltaX * this.multiplier; var dy = this.deltaY * this.multiplier; if(dx != 0 || dy != 0) { this.busy = true; window.scrollBy(dx, dy); this.oldX = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0; this.oldY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0; this.busy = false; } }; new AugmentScroll('slowest'); }; 

Answer 2

You cannot undo or change the window scroll event. What you can try is to get the current scroll position and subtract a few pixels, and then set it as the scroll position. I do not suggest anything like that.