Rectangle 27 0

javascript let user scrolling stop jquery animation of scrolltop?


// Assign the HTML, Body as a variable...
var $viewport = $('html, body');

// Some event to trigger the scroll animation (with a nice ease - requires easing plugin )...
$('#element').click(function() {
    $viewport.animate({ 
        scrollTop: scrollTarget // set scrollTarget to your desired position
    }, 1700, "easeOutQuint");
});

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
    }
});

@Benjammin' - good tip, small nitpick - use === rather than ==

@OhadSchneider Yeah implicit conversion can bite you in the ass, but I don't think this situation has really any risk of a false positive. But yeah, go ahead and use the triple equals, probably better that way.

Diode's solution didn't work for me - scroll() didn't differentiate between the animation and the user, meaning the animation stopped immediately. From a different post, the following works for me (modified for this purpose):

For touch screen devices you will need to add touchstart to your list of events, and check for it in the event itself ... || e.type == 'touchstart'

Note
Rectangle 27 0

javascript let user scrolling stop jquery animation of scrolltop?


// Assign the HTML, Body as a variable...
var $viewport = $('html, body');

// Some event to trigger the scroll animation (with a nice ease - requires easing plugin )...
$('#element').click(function() {
    $viewport.animate({ 
        scrollTop: scrollTarget // set scrollTarget to your desired position
    }, 1700, "easeOutQuint");
});

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
    }
});

@Benjammin' - good tip, small nitpick - use === rather than ==

@OhadSchneider Yeah implicit conversion can bite you in the ass, but I don't think this situation has really any risk of a false positive. But yeah, go ahead and use the triple equals, probably better that way.

Diode's solution didn't work for me - scroll() didn't differentiate between the animation and the user, meaning the animation stopped immediately. From a different post, the following works for me (modified for this purpose):

For touch screen devices you will need to add touchstart to your list of events, and check for it in the event itself ... || e.type == 'touchstart'

Note
Rectangle 27 0

javascript let user scrolling stop jquery animation of scrolltop?


// Assign the HTML, Body as a variable...
var $viewport = $('html, body');

// Some event to trigger the scroll animation (with a nice ease - requires easing plugin )...
$('#element').click(function() {
    $viewport.animate({ 
        scrollTop: scrollTarget // set scrollTarget to your desired position
    }, 1700, "easeOutQuint");
});

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
    }
});

@Benjammin' - good tip, small nitpick - use === rather than ==

@OhadSchneider Yeah implicit conversion can bite you in the ass, but I don't think this situation has really any risk of a false positive. But yeah, go ahead and use the triple equals, probably better that way.

Diode's solution didn't work for me - scroll() didn't differentiate between the animation and the user, meaning the animation stopped immediately. From a different post, the following works for me (modified for this purpose):

For touch screen devices you will need to add touchstart to your list of events, and check for it in the event itself ... || e.type == 'touchstart'

Note