Question

我想使网站自动浏览某一部分,然而,我并不希望滚动与用户投入——如果它开始滚动,然后是用户的滚动,那么我就希望自动滚动停止,让用户完全控制。

So I originally thought I could do something like this:

var animatable = $( body, html );
animatable.animate({scrollTop: $( #foo ).offset()}, 1000);

$(window).scroll(function() { animatable.stop(); });

然而,问题在于,滚动模型的推测会触发了玻璃窗的滚动活动手! 因此,估算开始,然后立即停止。

我正在寻求一种方式,即我只能把窗户滚动活动手套停下来,如果它是由用户投入引发的。这是可能的吗?

Answer 1

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):

// 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)
    }
});

友情链接