jQuery動畫滾動事件

Question

我有以下代碼，如果使用它，滾動效果不起作用，但是如果我將持續時間從500更改為50，則一切正常。

$(document).ready(function(){
    currentScrollTop = $( window ).scrollTop();
    $( window ).scroll( scrollWindow );
});
function scrollWindow(){
    var newScrollTop = $( window ).scrollTop();
    var height = $( window ).height();
    if( currentScrollTop > newScrollTop ){
        var newPosition = currentScrollTop - height;
        $( "html, body" ).animate({ scrollTop: newPosition }, 500, function(){
            currentScrollTop = $( window ).scrollTop();
        });
    }
    else if( currentScrollTop < newScrollTop ){
        var newPosition = currentScrollTop + height;
        $( "html, body" ).animate({ scrollTop: newPosition }, 500, function(){
            currentScrollTop = $( window ).scrollTop();
        });
    }
}

我在這里擺弄

Answer 1

這里有兩個問題：

1.您永遠不會更新currentScrollTop 。

2.您需要限制滾動事件在頁面已經滾動時不再被觸發。 而動畫是通過使用發生，你可以刪除事件.off （我已經修改了你的事件處理程序使用.on ，而不是.scroll用於此目的），然后在動畫完成時重新綁定。

---

解決方案： JSFiddle （我添加了一個可調輸入用於測試，因此您可以更改滾動速度。）

$(document).ready(function(){
    currentScrollTop = $( window ).scrollTop();
    $( window ).on("scroll", scrollWindow );
});

function scrollWindow(){

    var newScrollTop = $( window ).scrollTop();
    var height = $( window ).height();
    console.log(newScrollTop);
    if( currentScrollTop > newScrollTop ){
        var newPosition = currentScrollTop - height;

        //Remove our scroll event during animation
        $(window).off();

        $( "html, body" ).animate({ scrollTop: newPosition }, 500, function(){
            currentScrollTop = $( window ).scrollTop();

             //Rebind event after animation complete
            $( window ).on("scroll", scrollWindow );

        });
    }
    else if( currentScrollTop < newScrollTop ){

        //Remove our scroll event during animation
        $(window).off();

        var newPosition = currentScrollTop + height;
        $( "html, body" ).animate({ scrollTop: newPosition }, 500, function(){
            currentScrollTop = $( window ).scrollTop();

            //Rebind event after animation complete
            $( window ).on("scroll", scrollWindow );

        });
    }

    //Update scrollTop
    currentScrollTop = newScrollTop();

}

Answer 2

如果您在小提琴上稍等片刻，可以看到滾動效果正在起作用。 實際上，當動畫函數的duration參數為500時，它的速度相對要慢於50。因此，當您朝更高的值移動時，您在降低滾動速度。 您可以參閱此文檔以供參考。 您也可以在動畫持續時間內使用“慢”和“快”之類的字符串，而不是500或50。

http://api.jquery.com/animate/#duration

或者您可以使用超時。 試試這個代碼：

$(document).ready(function(){
currentScrollTop = $( window ).scrollTop();
var timeout;
$(window).scroll(function() {
clearTimeout(timeout);  
timeout = setTimeout(function() {
    var newScrollTop = $( window ).scrollTop();
var height = $( window ).height();
if( currentScrollTop > newScrollTop ){
    var newPosition = currentScrollTop - height;
    $( "html, body" ).animate({ scrollTop: newPosition }, 500,
function(){
        currentScrollTop = $( window ).scrollTop();
    });
}
else if( currentScrollTop < newScrollTop ){
    var newPosition = currentScrollTop + height;
    $( "html, body" ).animate({ scrollTop: newPosition }, 500,function(){
        currentScrollTop = $( window ).scrollTop();
    });
}

}, 50);});});