Adjust window scrolling speed

Question

I've been looking all over, but cannot seem to find any ways as to how I can achieve this, so here goes. I'm trying to adjust the scrolling speed to deviate from the browser's default speed. So the scrolling would be faster/slower than it normally would be.

I tried doing stuff with $(window).scrollLeft() but that isn't quite working for me. Does anybody know any way to do this in Javascript or jQuery?

Thanks :)

Note: I am not looking for the parallax effect ;)

Answer 1

Here's a quick JavaScript class I threw together "AugmentScroll". In you window onload/document ready event just instance the class and it'll change the scrolling behavior. It uses an interval timer and the window scroll event. Hopefully this will get you started. It works in the latest Chrome and FF as well as IE9. The "smooth scrolling" Advanced / General option in FF manages to mess it up 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 can't cancel or alter the window scroll event. What you can try is getting the current scroll position and subtract a few pixel then set that as the scroll position. I don't suggest doing anything like this.