javascript - Adjust window scrolling speed - Stack Overflow

admin管理员组

文章数量:1301534

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 ;)

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 ;)

• javascript
• jquery
• scroll

Share Follow asked Jun 17, 2013 at 14:17 AKGAKG 3,31666 gold badges3030 silver badges3838 bronze badges 1

• Couple of links you might wanna look at: dezinerfolio./2007/08/08/df-javascript-smooth-scroll webdeveloper./forum/… – user1853788 Commented Jun 17, 2013 at 14:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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');

};

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.

本文标签： javascriptAdjust window scrolling speedStack Overflow