调整窗口滚动速度

时间:2013-06-17 14:17:48

标签: javascript jquery scroll

我一直在寻找,但似乎无法找到任何方法来实现这一目标,所以这里有。我正在尝试调整滚动速度以偏离浏览器的默认速度。所以滚动会比通常更快/更慢。

我尝试用$(window).scrollLeft()做的事情,但这对我来说不太合适。有人知道用Javascript或jQuery做任何事吗?

谢谢:)

注意:我不是在寻找视差效果;)

2 个答案:

答案 0 :(得分:4)

这是一个快速的JavaScript类,我把“AugmentScroll”放在一起。在你的窗口onload / document ready事件中只是实例类,它将改变滚动行为。它使用间隔计时器和窗口滚动事件。希望这会让你开始。它适用于最新的Chrome和FF以及IE9。 FF中的“平滑滚动”高级/常规选项可以让它搞得一团糟。

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

};

答案 1 :(得分:3)

您无法取消或更改窗口滚动事件。您可以尝试获取当前滚动位置并减去几个像素,然后将其设置为滚动位置。我不建议做这样的事情。