Stop the animation when it takes

Question

I have this animation to scroll bottom:

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

I want stop this animation when I scroll mouse. I searched and found a solution but when I give that whith "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;
    });
});

animation don't started. When I remove "scroll" animation work and stop when I click mouse but of course dont stop when I scroll. How fix this?

How else can animate a scroll to return to the bottom and stopped when i scroll mouse?

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I use to detect the direction of scrolling. When the animation goes down I do not do anything. If the user is scrolling up, the animation is stopped.

$('.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;
        });
    });
});

Hint found at: How can I determine the direction of a jQuery scroll event?

Stop the animation when it takes

1 Answers1