स्क्रॉल व्हील घटनाक्रम कैप्चरिंग

Question

मैं एक ईवेंट को कैप्चर करना चाहता हूं जब कोई उपयोगकर्ता स्क्रॉल व्हील को उस स्थिति में स्क्रॉल करता है जहां पृष्ठ स्क्रॉल नहीं होता/स्क्रॉल करने योग्य नहीं होता है। हालांकि, मानक जेएस स्क्रॉल इवेंट केवल तब ही आग लग जाता है जब ब्राउज़र वास्तव में स्क्रॉल करता है, और अतिप्रवाह छिपाने के लिए स्टाइल किए गए डीओएम तत्व के लिए आग नहीं लगाएगा।

Google मानचित्र 'ज़ूम करने के लिए स्क्रॉल एक प्रकार का व्यवहार है जिसे मैं ढूंढ रहा हूं।

क्या किसी को भी ऐसा कोई विचार है कि इस तरह कुछ कैसे पूरा किया जाए?

धन्यवाद।

Answer 1

आप माउस पर कब्जा कर सकते हैं -wheel घटना ठीक:

$('#yourElement').on('DOMMouseScroll mousewheel', function() { 
    ... 
}); 

लाइव डेमो:http://jsfiddle.net/chtNP/1/

(। मैं ईवेंट हैंडलर बाध्य करने के लिए jQuery का उपयोग कर रहा है, लेकिन यह जो एपीआई आप निश्चित रूप से उपयोग करते हैं, की परवाह किए बिना काम करता है)

Answer 2

jQuery के साथ, आप this plugin, या इसी तरह की किसी भी संख्या का उपयोग कर सकते हैं जो एक ही काम करते हैं।

jQuery या किसी ऐसे ही ढांचे एक विकल्प नहीं है, तो यह संभव है, लेकिन जब आप इसे एक से अधिक ब्राउज़र में काम करना चाहते हैं दर्द की एक दुनिया के लिए अपने आप को तैयार ...

Answer 3

इस समय, फ़ायरफ़ॉक्स DOMMouseScroll और व्हील ईवेंट को परिभाषित करता है। क्रोम, ओपेरा और आईई (नवीनतम, फिर से!) mousewheel परिभाषित करें।

इस तरह मैंने किया:

if(window.onwheel !== undefined) { 
    window.addEventListener('wheel', onMouseWheel) 
} else if(window.onmousewheel !== undefined) { 
    window.addEventListener('mousewheel', onMouseWheel) 
} else { 
    // unsupported browser 
} 

नोट है कि पुराने आईई संस्करण में addEventListener समर्थन एक polyfill की जरूरत है। वैकल्पिक रूप से आप पुरानी विंडो का उपयोग कर सकते हैं। Mousewheel = function() {} या जो भी विधि।

जैसा कि आप देख सकते हैं, ईवेंट श्रोता विंडो ऑब्जेक्ट से जुड़ा हुआ है। आप क्रॉस-ब्राउज़र फैशन में तत्वों से इसे संलग्न नहीं कर सकते हैं। आप इवेंट ऑब्जेक्ट लक्ष्य प्रॉपर्टी का उपयोग यह देखने के लिए कर सकते हैं कि यह कहां ट्रिगर किया गया था, और उस आधार पर एक फ़िल्टर करें।

पीएस: एक और क्रॉस-ब्राउज़र विचार: आईई में, आपको कॉलबैक फ़ंक्शन ("onMouseWheel") में प्रोसेस करते समय ईवेंट ऑब्जेक्ट के अंदर "व्हीलडेल्टा" प्रॉपर्टी (और इसे साइन इन करें!) का उपयोग करना होगा। अन्य ब्राउज़रों क्षैतिज स्क्रॉलिंग के लिए "डेल्टा" (या "डेल्टाएक्स" पॉप्युलेट करेंगे)।