Phát hiện xem phần tử có dừng đà di chuyển không?

Question

Có thể xác định được liệu một phần tử có dừng di chuyển trong Mobile Safari qua Javascript không?

Tôi có một phần tử có đà di chuyển bằng cách sử dụng -webkit-overflow-scrolling:touch và tôi cần phải phát hiện xem phần tử đã dừng cuộn chưa, bao gồm sau khi động lượng ảnh hưởng đến cuộn.

Điều này có khả thi không? Sử dụng sự kiện onscroll không hoạt động như trong ứng dụng của tôi.

Answer 1

Bạn có thể tính toán vận tốc vuốt và cố gắng tìm hiểu xem động lượng sẽ xảy ra dựa trên giá trị ngưỡng nào đó. Tôi đã thực hiện một số thử nghiệm và khoảng 0,25 pixel/ms có vẻ là một giá trị tốt.

Lưu ý: Đôi khi việc di chuyển động lượng cũng sẽ xảy ra với vận tốc thấp hơn. Tốc độ thấp nhất để làm cho động lượng cuộn mà tôi ghi lại là 0,13 (với thời gian đồng bằng rất ngắn) vì vậy nếu bạn cần một giải pháp hoàn hảo 100%, hãy tiếp tục tìm kiếm.

Mã ví dụ cũng phát hiện và giao dịch với quá trình ghi đè.

Sử dụng JQuery;

var scrollWrapper = $('#myWrapper'); 
var starTime, startScroll, waitForScrollEvent; 
scrollWrapper.bind('touchstart', function() { 
    waitForScrollEvent = false; 
}); 

scrollWrapper.bind('touchmove', function() { 
    startTime = new Date().getTime(); startScroll = scrollWrapper.scrollTop(); 
}); 

scrollWrapper.bind('touchend', function() { 
    var deltaTime = new Date().getTime() - startTime; 
    var deltaScroll = Math.abs(startScroll - scrollWrapper.scrollTop()); 
    if (deltaScroll/deltaTime>0.25 
     || scrollWrapper.scrollTop()<0 
     || scrollWrapper.scrollTop()>scrollWrapper.height()) { 
    // will cause momentum scroll, wait for 'scroll' event 
    waitForScrollEvent = true; 
    } 
    else { 
    onScrollCompleted(); // assume no momentum scroll was initiated 
    } 
    startTime = 0; 
}); 

scrollWrapper.bind('scroll', function() { 
    if (waitForScrollEvent) { 
    onScrollCompleted(); 
    } 
}); 

Answer 2

Trong trường hợp của tôi này làm việc hoàn hảo:

var timer; 
$(scrollWrapper).on('scroll',function(e){ 
    if(timer){ 
     clearTimeout(timer); 
    } 
    timer = setTimeout(function(){ 
     $(this).trigger('scrollFinished'); 
    }, 55) 
}) 



$(scrollWrapper).on('scrollFinished',function(){ 
     // will be called when momentum scroll is finished 
    }) 

Xuất bản 'scrollfinished' sự kiện khi cuộn đã dừng lại.