Jquery .animate() उपयोगकर्ता स्क्रॉल मैन्युअल रूप से स्क्रॉल करते समय स्क्रॉल करना बंद कर देता है?

Question

मैंने एक स्निपेट स्थापित किया है जो क्लिक किए जाने पर पृष्ठ अनुभाग को स्क्रॉल करता है, समस्या यह है कि यदि उपयोगकर्ता एनीमेशन के बीच में स्क्रॉल करना चाहता है तो स्क्रॉल थोड़े स्टटर।

$("section").click(function(e) { 
     $('html,body').animate({ scrollTop: $(this).position().top }, 'slow'); 
     return false; 
    }); 

यदि उपयोगकर्ता मैन्युअल रूप से स्क्रॉल करता है तो मैं jquery एनीमेशन को कैसे रोक सकता हूं?

Answer 1

बदलें इस के लिए अपने समारोह:

var page = $("html, body"); 

$("section").click(function(e) { 

    page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ 
     page.stop(); 
    }); 

    page.animate({ scrollTop: $(this).position().top }, 'slow', function(){ 
     page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove"); 
    }); 

    return false; 
}); 

यह होगा:

• रोक एनीमेशन यदि उपयोगकर्ता स्क्रॉल मैन्युअल रूप से (केवल एनीमेशन के दौरान)
• अपने सामान्य jQuery एनीमेशन बाधा नहीं देता, अन्य उत्तर के इस तरह के कुछ होगा

---

कुछ अतिरिक्त जानकारी:

आप उन घटनाओं के सभी के लिए क्यों बाध्यकारी हैं? "स्क्रॉल mousewheel आदि ..."

स्क्रॉल घटनाओं के कई अलग-अलग प्रकार हैं। आप अपने माउस, कीबोर्ड, टचस्क्रीन इत्यादि का उपयोग करके नीचे स्क्रॉल कर सकते हैं। इसके साथ हम सभी को पकड़ने के लिए सुनिश्चित करते हैं।

var page = $("html, body"); का उपयोग क्या है? क्या मैं हर जगह $("html, body") का उपयोग नहीं कर सकता?

यदि आप एक ही चयनकर्ता का एक से अधिक बार उपयोग करते हैं, तो variable में उन्हें कैश करने का अच्छा अभ्यास है। प्रोग्राम लिखना/उपयोग करना आसान होगा, और प्रोग्राम को हर बार चयनकर्ता की फिर से गणना करने से बेहतर प्रदर्शन होगा।

मुझे .animate() और .stop() पर और जानकारी कहां मिल सकती है?

आप .animate() और .stop() के लिए jQuery दस्तावेज़ पढ़ सकते हैं। मैं इस सिद्धांत पर .stop() कार्यों के बाद से animation queue's पढ़ने की भी अनुशंसा करता हूं।

Answer 2

$("your selector").scroll(function(){ 
$('html,body').stop(); 
}); 

संदर्भ stop

Answer 3

इस

$('html,body').scroll(function() { 
    $(this).stop(true, false); 
}); 

यह भी तत्व की कतार से सभी अन्य एनिमेशन निकाल देंगे की कोशिश करो, लेकिन यह वर्तमान पुस्तक एनीमेशन के अंत के लिए नहीं "कूद" होगा।

Answer 4

मैं पता लगाने के उपयोगकर्ता घटनाओं

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function (e) { 
    if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove") { 
    $("html,body").stop(); 
    } 
}); 

यहाँ a good tutorial है द्वारा यह करना होगा।