javascript - 用户交互后取消滚动

Question

当用户单击指向同一页面的链接时，我的网页会滚动动画。我想在用户尝试滚动时立即取消此动画(否则用户和浏览器正在争夺控制权)——无论是使用鼠标滚轮、键盘还是滚动条(或任何其他方式——还有其他方式吗滚动？)。我设法在使用鼠标滚轮或键盘后取消了动画，如何使用滚动条使其正常工作？

这是我的代码查找键盘的方式:

$(document.documentElement).keydown( function (event) {
    if(event.keyCode == 38 || 40) stopScroll();
});

function stopScroll() {
    $("html, body").stop(true, false);
}

我还通过使用 scroll() 尝试了一种更优雅的方法，问题是 scroll() 捕获了所有内容，包括动画和自动滚动。除了动画滚动，我想不出任何方法让它捕获所有滚动。

Answer 1

你需要动画标记，像这样

$("html, body").stop(true, false).prop('animatedMark',0.0).animate({scrollTop : top, animatedMark: '+=1.0'})

这是代码，代码是GWT和javascript的混合所以把它移到了js，没有完全测试，请试试

var lastAnimatedMark=0.0;
function scrollToThis(top){
    // Select/ stop any previous animation / reset the mark to 0 
    // and finally animate the scroll and the mark
    $("html, body").stop(true, false).prop('animatedMark',0.0).
    animate({scrollTop : top, animatedMark: '+=1.0'}
    ,10000,function(){
        //We finished , nothing just clear the data         
        lastAnimatedMark=0.0;
        $("html, body").prop('animatedMark',0.0);
    });
}
//Gets the animatedMark value
function animatedMark() {
    var x=$("html, body").prop('animatedMark');
    if (x==undefined){
        $("html, body").prop('animatedMark', 0.0);
    }
    x=$("html, body").prop('animatedMark');
    return x;
};

//Kills the animation
function stopBodyAnimation() {
    lastAnimatedMark=0;
    $("html, body").stop(true, false);
}
//This should be hooked to window scroll event 
function scrolled(){
    //get current mark
    var currentAnimatedMark=animatedMark();         
    //mark must be more than zero (jQuery animation is on) & but 
    //because last=current , this is user interaction.
    if (currentAnimatedMark>0 && (lastAnimatedMark==currentAnimatedMark)) {
        //During Animation but the marks are the same ! 
        stopBodyAnimation();
        return;
    }

    lastAnimatedMark=currentAnimatedMark;    
}

这是关于它的博客

http://alaamurad.com/blog/#!canceling-jquery-animation-after-user-interaction

尽情享受吧!