cho phép người dùng cuộn dừng hoạt hình jquery của scrolltop?

Question

Tôi muốn làm cho trang web tự động cuộn đến một phần tử nhất định, tuy nhiên tôi không muốn cuộn để chống lại đầu vào của người dùng-- Nếu nó bắt đầu cuộn và sau đó người dùng cuộn, tôi muốn cuộn tự động dừng và cho phép người dùng có toàn quyền kiểm soát.

Vì vậy, tôi nghĩ ban đầu tôi có thể làm một cái gì đó như thế này:

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

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

Tuy nhiên, vấn đề hợp-- các hình ảnh động của scrollTop gây nên xử lý sự kiện cuộn cho cửa sổ! Vì vậy, hoạt ảnh bắt đầu và sau đó dừng lại ngay lập tức.

Tôi đang tìm một cách mà tôi có thể làm cho trình xử lý sự kiện cuộn cửa sổ của tôi chỉ dừng lại nếu nó được kích hoạt bởi đầu vào của người dùng ... Điều này có thể không?

Answer 1

Giải pháp của Diode không hoạt động đối với tôi - scroll() không phân biệt được giữa hoạt ảnh và người dùng, nghĩa là hoạt ảnh dừng ngay lập tức. Từ số different post, nội dung sau hoạt động cho tôi (được sửa đổi cho mục đích này):

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