jQuery माउस व्हील प्लगइन अनुकूलन

Question

मेरे पास एक पूर्णस्क्रीन स्लाइडर है और माउस व्हील का उपयोग करके नेविगेशन में सक्षम होना चाहता है। माउस व्हील इवेंट का पता लगाने के लिए मैंने सोचा कि jQuery mousewheel प्लगइन सबसे अच्छा विकल्प होना चाहिए।

मैं इसे शामिल करने और आग कार्यों को शामिल करने में सक्षम हूं। लेकिन मैं इसे जिस तरह से चाहता हूं उसे कॉन्फ़िगर करने में सक्षम नहीं हूं (और कोई संसाधन नहीं मिला)।

मैं स्क्रॉल किए गए पिक्सेल की एक निश्चित राशि की जांच करना चाहता हूं। इसलिए, उदाहरण के लिए, माउस व्हील 20px up स्क्रॉल करने का प्रयास करें, मैं किसी फ़ंक्शन को आग लगाना चाहता हूं, या 20px down किसी अन्य फ़ंक्शन के लिए।

​$(document).ready(function(){ 
    $('body').bind('mousewheel', function(e){ 
     if(e.originalEvent.wheelDelta /120 > 0) { 
      alert('Wait! I fire way too often!'); 
     } 
     else{ 
      alert('We are going down, way too msuch alerts!'); 
     } 
    }); 
}); 

JS FIDDLE

Answer 1

(/ नीचे स्क्रॉल अप) अगर मैं आपकी समस्या को समझ में सही ढंग से, आप भी अक्सर घटनाओं आग देख रहे हैं। यहां मुद्दा यह है कि किसी दिए गए स्क्रॉल एक्शन के लिए, घटना कई बार आग लगती है। यदि आप अपने ब्राउज़र में डेवलपर कंसोल खोलते हैं और console.log(e.originalEvent.wheelDelta) करते हैं तो आप इसे देख सकते हैं। यह आपके वांछित व्यवहार को फेंकने, कई छोटी स्क्रॉल घटनाओं में एक बड़ी स्क्रॉल तोड़ सकता है।

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     if (scrollPixels < -20) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 20){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 
    }); 
}); 

फिर आप या तो ऊपर या नीचे चेतावनी आग के बाद पुस्तक डेल्टा स्पष्ट कर सकते हैं: तरह से मैं इस संभाला एक चर का उपयोग करने के लिए स्क्रॉल डेल्टा धारण करने के लिए किया गया था।

JS Fiddle

तुम भी रूप में सबसे स्क्रॉल इस घटना को सक्रिय कर देगा 20 से अधिक पिक्सल के लिए अपने परीक्षण को बढ़ाने के लिए चाहते हो सकता है - 20 पिक्सल ही के बारे में 1/4 एक इंच का है।

उम्मीद है कि मदद करता है। यदि यह आपकी समस्या को ठीक नहीं करता है, तो इस पर टिप्पणी करने में संकोच न करें कि मैं कहां गलत हुआ। शुभकामनाएँ!

---

पता टिप्पणी करने के लिए अद्यतन:

आप जब तक स्क्रॉल समय समाप्त करने के बाद स्क्रॉल को क्रियान्वित करने बंद कर दिया है समय की एक छोटी राशि (इस उदाहरण में 250 एमएस) इंतजार करेंगे की स्थापना द्वारा बंद हो जाता है इंतज़ार कर सकते हैं। मैं इस समय समाप्ति के अंदर तर्क ले जाया गया ताकि यह केवल के बाद स्क्रॉल बंद कर दिया है चलेंगे: बहुत बहुत शुक्रिया अपने समय के लिए

$(document).ready(function(){ 
    var scrollPixels = 0; // variable to store scroll delta 
    var scrolling; // timeout function var 

    $('body').bind('mousewheel', function(e){ 
     // increment/decrement scroll delta 
     scrollPixels += e.originalEvent.wheelDelta; 
     console.log(scrollPixels); 

     clearTimeout(scrolling); 
     scrolling = setTimeout(function() { 
     console.log('stop wheeling! ', scrollPixels); 
     scrolling = undefined; 

     if (scrollPixels < -300) { 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming down!'); 
     } 
     else if (scrollPixels > 300){ 
      scrollPixels = 0; // clear scroll delta 
      alert('Coming up!'); 
     } 

    }, 250); 
    }); 
}); 

अपडेट किया गया JS Fiddle