पता लगाएं कि क्या तत्व गति स्क्रॉलिंग बंद कर दिया है?

Question

क्या यह पता लगाने में असमर्थ है कि क्या मोबाइल तत्व जावास्क्रिप्ट के माध्यम से मोबाइल सफारी में स्क्रॉल करना बंद कर दिया है?

मेरे पास एक तत्व है जिसमें -webkit-overflow-scrolling:touch का उपयोग करके गति स्क्रॉलिंग है, और मुझे यह पता लगाने की आवश्यकता है कि तत्व स्क्रॉलिंग बंद कर दिया गया है, जिसमें गति को स्क्रॉल को प्रभावित करने के बाद भी शामिल है।

क्या यह संभव है? onscroll ईवेंट का उपयोग करना मेरे ऐप के अंदर काम नहीं कर रहा है।

Answer 1

आप एक स्वाइप वेग की गणना कर सकते हैं और कुछ थ्रेसहोल्ड मान के आधार पर गति स्क्रॉल होने पर पता लगाने की कोशिश कर सकते हैं। मैंने कुछ परीक्षण किया है और लगभग 0.25 पिक्सेल/एमएस एक अच्छा मूल्य प्रतीत होता है।

नोट: कभी-कभी गति कम करने के लिए गतिमान स्क्रॉलिंग भी होती है। मैंने जो गति स्क्रॉलिंग दर्ज की है, उसके लिए सबसे कम वेग 0.13 था (बहुत कम डेल्टा समय के साथ) ताकि आपको 100% सही समाधान की आवश्यकता हो, तो देखो।

उदाहरण कोड overscrolling का पता लगाता है और सौदों का पता लगाता है।

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

मेरे मामले में यह पूरी तरह से काम किया:

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

प्रकाशित scrollfinished 'घटना जब स्क्रॉल रुक गया है।