उपयोगकर्ता कैसे सक्रिय रूप से स्क्रॉल करते समय मुझे पता लगा सकता है?

Question

मेरे पृष्ठ में एक स्क्रोल करने योग्य क्षेत्र है जिसमें कई तत्व शामिल हैं। प्रत्येक तत्व एक समारोह को ट्रिगर करता है जब ढक जाता है।

मेरी समस्या यह है कि यदि उपयोगकर्ता अपने मूसहेल के साथ ऊपर या नीचे स्क्रॉल करता है, तो फ़ंक्शन प्रत्येक तत्व के लिए ट्रिगर करता है जो कर्सर नीचे से नीचे स्क्रॉल करता है।

क्या कोई तरीका है कि मैं केवल होवर पर फ़ंक्शन ट्रिगर कर सकता हूं यदि उपयोगकर्ता सक्रिय रूप से स्क्रॉल नहीं कर रहा है?

jQuery का अंतर्निहित .scroll() मुझे जो चाहिए वह प्रतीत नहीं होता है, क्योंकि स्क्रॉल ईवेंट केवल स्क्रॉल शुरू होने पर ही ट्रिगर होता है। मुझे यह जानने की जरूरत है कि स्क्रॉल "प्रगति पर है" तो बोलने के लिए।

---

अद्यतन:

$container.find('div.item').each(function(i, e){ 
    $(e).hover(
      function(){ 
       $(this).toggleClass('expanded'); 
       // other functions here 
      }, 
      function(){ 
       $(this).toggleClass('expanded'); 
      } 
    ); 
}); 

तो मुझे क्या करना चाहते हैं .hover() में अक्षम सब कुछ है उपयोगकर्ता वर्तमान पृष्ठ स्क्रॉल है यदि: यहाँ मेरे वर्तमान कोड है।

Answer 1

मैं mouseenter पर एक निष्पक्ष समय के साथ setTimeout का प्रयोग करेंगे और उसके बाद clearTimeoutmouseleave पर है, जो होवर पर एक थोड़ा विलंब पैदा करेगा, इसलिए जब उपयोगकर्ता के लिए तत्व पर अपने माउस रखती मंडराना केवल ट्रिगर करेगा निर्धारित समय।

यह उम्मीद है कि आपकी स्क्रॉलिंग समस्या को कम करें। इससे बेहतर समाधान हो सकता है, लेकिन यह पहली बात थी जिसे मैंने सोचा था।

संपादित

जल्दी से इस उदाहरण लिखा है, ठीक से काम करना चाहिए:

$(function() { 
    "use strict"; 
    var $container = $("#container"), 
     timeout, self; 

    $container.find("div").each(function() { 
     $(this).hover(
      function() { 
       self = this; 
       timeout = setTimeout(function() { 
        $(self).css({ 
         width : 500, 
         height: 500 
        }); 
       }, 500); 
      }, 
      function() { 
       clearTimeout(timeout); 
       $(this).css({ 
        width : 300, 
        height: 300 
       }); 
      } 
     ); 
    }); 
}); 

एक डेमो के लिए इस बेला पर जाएँ: http://jsfiddle.net/sQVe/tVRwm/1/

यह एक देरी का कितना आप पर निर्भर है कि आप चाहते हैं, मैंने 500ms का उपयोग किया।

नोट

.each() की जरूरत नहीं है, तो आप तुरंत div संग्रह पर .hover() कह सकते हैं। मैंने .each() शामिल किया क्योंकि मुझे नहीं पता कि क्या आप होवर ईवेंट को बाध्य करने से अधिक करना चाहते हैं।