需要时停止动画

Question

我有这个动画可以滚动到底部：

$('.link_msg').on('click', function() {
    $(this).closest('#tabs').find('.messages').each(function() {
        $(this).animate({ scrollTop: $(this).prop('scrollHeight')}, 1500);
    });
});

我想在滚动鼠标时停止这个动画。我搜索并找到了一个解决方案，但是当我给出 "scroll...":

$('.link_msg').on('click', function() {
    $(this).closest('#tabs').find('.messages').each(function() {
        $(this).on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
           $(this).stop();
        });
        $(this).animate({ scrollTop: $(this).prop('scrollHeight')}, 1500), function(){
            $(this).off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
        });
        return false;
    });
});

动画没有启动。当我删除 "scroll" 动画工作并在我单击鼠标时停止但当然不会在我滚动时停止。如何解决这个问题？

还有什么方法可以使滚动到 return 底部并在我滚动鼠标时停止？

Answer 1

我用来检测滚动的方向。当动画停止时，我什么都不做。如果用户向上滚动，则动画停止。

$('.link_msg').on('click', function() {

    $(this).closest('#tabs').find('.messages').each(function() {

        $(this).animate({ scrollTop: $(this).prop('scrollHeight')}, 2500);

        var lastScrollTop = 0;
        $(this).scroll(function(event){
            var st = $(this).scrollTop();
            if (st > lastScrollTop){
                // downscroll code
            } else {
                // upscroll code
                $(this).stop();
            }
            lastScrollTop = st;
        });
    });
});

提示发现于：How can I determine the direction of a jQuery scroll event?

需要时停止动画

Stop the animation when it takes

scroll

scrolltop

prop