在jquery scrollTop动画完成后滚动显示

Question

为什么另一滚动事件被调用后一个scrollTop动画触发其complete回调？

单击处理程序:

var lock = false;

$('#id').click(function(event) {
    var pos;
    if (lock) {
        return;
    }
    lock = true;
    pos = 150;

    console.log("jump start");

    $(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: pos }, 150, function () {
        lock = false;
        console.log("jump end");
    });
});

滚动处理程序:

$(window).scroll(function (e) {
    console.log("scrolling");

    if (!lock){
        alert('1');
    }
});

日志:

jump start
scrolling
jump end
scrolling

关于jsfiddle的演示

Answer 1

背景

jQuery scrollTop()使用scrollTo()这是一个fire和forget事件.滚动没有停止的事件.滚动事件从scrollTo带外发生.scrollTo表示'开始滚动',滚动事件表示'滚动(某个位置)'.scrollTo只是启动滚动的开始,它不保证滚动返回时完成.因此,jQuery动画在最终滚动之前完成(甚至可以备份多个滚动).替代方案是jQuery等待滚动的位置是它所要求的(根据我的解决方案),但它不会这样做

如果有一个我们可以指向描述它的规范,那将是很好的,但它只是没有规范的0级dom元素之一,请参见此处.我认为它的工作方式是有道理的,这就是为什么所有浏览器似乎都是这样实现它的原因.

为什么会这样呢？

在动画的最后一个滚动上发生以下情况:

1. jquery:'窗口请滚动最后一点'
2. 窗口:'我从jquery收到此消息滚动我现在就开始了'
3. jquery:'哇哇我完成动画,我会完成'
4. 你的代码: lock = false;console.log("jump end");
5. 窗口:'我已滚动'调用滚动事件处理程序.'
6. 你的代码:$(window).scroll(function (e) {'为什么会这样？'

正如您所看到的,jquery不会在完成动画之前等待动画的最后滚动步骤(继续执行步骤4).部分原因是因为滚动没有停止的事件,部分原因是因为jquery不等待滚动位置到达请求的位置.我们可以检测到我们何时到达目的地位置,如下所述.

解决方案

滚动完成时没有停止的事件.看到这里.有意义的是没有停止的事件,因为用户可以在任何点再次开始滚动,因此滚动没有真正停止的点 - 用户可能只是暂停了几分之一秒.

用户滚动:对于用户滚动,正常的方法是等待一段时间来查看滚动是否完成,如引用问题的答案中所述(记住用户可以再次开始滚动).

scrollTop:但是,由于我们知道滚动到的位置,我们可以做得更好.

看到这个小提琴.

它的关键在于,既然我们知道我们在哪里滚动,我们可以存储该位置.当我们到达那个位置时,我们知道我们已经完成了.

输出现在是:

jump start
scroll animation
jump end

代码是(请注意,这是基于您的小提琴而不是编辑问题中的代码):

var scrollingTo = 0;
$('#id').click(function(event) {    
    if (scrollingTo) {
        return;
    }        
    console.log("jump start");
    scrollingTo = 150;
    $(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: scrollingTo }, 150, function () {                
    });
});

function handleScroll()
{    
    if( scrollingTo !== 0  && $(window).scrollTop() == scrollingTo)
    {
        scrollingTo = 0;
        console.log("jump end");    
    }
}

$(window).scroll(function (e) {    
    if (!scrollingTo){
        console.log('user scroll');
    } else {
        console.log("scroll animation");
    }
    handleScroll();
});