कैसे हर एक कंटेनर - उत्कृष्ट पुस्तकालय

निम्नलिखित वेब पेज पर विचार करने के लिए एक Onscroll हैंडलर संलग्न के बिना एक पृष्ठ पर सभी स्क्रॉल घटनाओं पर कब्जा करने की:कैसे हर एक कंटेनर

<html> 
    <body onscroll="alert('body scroll event')"> 
    <div style='width:200px;height:200px;overflow:auto' onscroll="alert('div scroll event')"> 
     <div style='height:400px'> 
     </div> 
    </div> 
    </body> 
</html>

यह एचटीएमएल एक स्क्रॉलबार साथ एक div पैदा करता है। यदि आप स्क्रॉलबार को ले जाते हैं, तो div तत्व पर "ऑनस्क्रॉल" ईवेंट ट्रिगर होता है। हालांकि, शरीर पर "ऑनस्कोल" घटना नहीं निकाल दी जाती है। इसकी अपेक्षा की जाती है, क्योंकि डब्ल्यू 3 सी कहता है कि तत्व ऑनस्कोल घटनाएं "बबल" नहीं होती हैं।

हालांकि, मैं एक क्लाइंट-साइड वेब फ्रेमवर्क विकसित कर रहा हूं जिसे किसी भी समय पृष्ठ के किसी भी तत्व पर स्क्रॉल बार स्क्रॉल करने की आवश्यकता है। अगर "ऑनस्कोल" बुलबुले हो तो यह करना आसान होगा, लेकिन दुर्भाग्यवश यह नहीं है। क्या पूरे पृष्ठ पर ऑनस्कोल ईवेंट का पता लगाने का कोई और तरीका है? (अभी मैं मुख्य रूप से वेबकिट पर ध्यान केंद्रित कर रहा हूं, इसलिए एक वेबकिट-विशिष्ट समाधान ठीक होगा ...)

यहां कुछ चीजें हैं जिनकी मैंने कोशिश की है: 1. DOMAttrModified को कैप्चर करना (ऐसा लगता है कि आग लगती नहीं है चलती स्क्रॉलबार।) 2. डोम पर्यवेक्षकों का उपयोग करना (भी स्क्रॉलबार के लिए आग नहीं लग रहे) 3. बुलबुला करने के लिए "Onscroll" घटना प्रकार में परिवर्तन करना (संभव नहीं हो रहा है)

यह एकमात्र तरीका लगता है दुनिया भर में ऑनस्क्रॉल घटनाओं को कैप्चर करना प्रत्येक तत्व पर ऑनस्कोल ईवेंट संलग्न करना है जो स्क्रॉल कर सकता है, जो बहुत बदसूरत है और मेरे ढांचे के प्रदर्शन को चोट पहुंचाने वाला है।

कोई भी बेहतर तरीका जानता है?

अग्रिम धन्यवाद!

स्रोत

2012-11-01 drcode

window.onscroll काम नहीं किया? – JustinDanielson

* ... क्रिकेट चहकती ... *

ठीक है, मुझे लगता है कि इस सवाल का किसी भी stackoverflow प्यार पाने के लिए नहीं जा रहा है, तो मैं रूप में अच्छी तरह का सबसे अच्छा समाधान के रूप में अपने ही सवाल का जवाब हो सकता है मुझे अब तक पता चला है, यदि कोई अन्य उपयोगकर्ता इस प्रश्न पर ठोकर खाता है:

शरीर के लिए सबसे अच्छा समाधान "ऑनमोसडाउन" और "ऑनकीडाउन" को पकड़ने के लिए है: ये घटनाएं बबल, और इसलिए यदि कोई उपयोगकर्ता पृष्ठ पर स्क्रॉलबार को स्थानांतरित करने का प्रयास करता है तो ये वैश्विक कार्य उप-उत्पाद के रूप में आग लगेंगे। फिर, इन कार्यों में, बस event.target देखें और उन ऑब्जेक्ट्स पर एक अस्थायी "ऑनस्कोल" ईवेंट संलग्न करें जब तक कि माउस/कुंजी फिर से "ऊपर" न हो। उस विधि का उपयोग करके, आप "हैंडलर ब्लोट" से बच सकते हैं और अभी भी वैश्विक रूप से सभी "ऑनस्कोल" घटनाओं को कैप्चर कर सकते हैं। (मुझे लगता है कि यह "माउस व्हील" स्क्रॉलिंग के लिए भी काम करेगा, लेकिन उस अंतिम शिकन पर मेरा शोध अभी भी लंबित है।)

स्रोत

2012-11-02 15:04:40 drcode

आपको दस्तावेज़ में एक मूसहेल घटना भी जोड़नी चाहिए। –

अच्छा - मैंने घटना को पूरे उत्तर में नहीं लिया, लेकिन जैसे ही आपने "ऑनमौसेडाउन" का उल्लेख किया था, मैं पहले से ही सही दिशा की ओर इशारा करता था - धन्यवाद –

मुझे यह वही समस्या थी।

jQuery का उपयोग करने का सबसे आसान तरीका है। ध्यान रखें कि यह विधि संभावित रूप से आपके पृष्ठ को धीमा कर सकती है। यह घटना के बाध्य होने के बाद जोड़े गए किसी भी नए तत्व के लिए भी जिम्मेदार नहीं होगा।

$("*").scroll(function(e) { 
    // Handle scroll event 
});

वेनिला जावास्क्रिप्ट में, आप अपने addEventListener फोन पर true को useCapture बूलियन सेट कर सकते हैं, और यह गतिशील रूप से जोड़े गए लोगों सहित सभी तत्वों, पर सक्रिय होगा।

document.addEventListener('scroll', function(e) { 
    // Handle scroll event 
}, true);

ध्यान दें कि स्क्रॉल घटना वास्तव में होने से पहले यह आग लग जाएगी। जैसा कि मैं इसे समझता हूं, वहां दो चरणों की घटनाएं होती हैं। कैप्चर चरण पहले होता है, और पृष्ठ रूट से शुरू होता है (मालिक दस्तावेज़?) और उस घटना के लिए नीचे जाता है जहां घटना हुई थी। इसके बाद बुलबुला चरण आता है, जो तत्व से रूट तक वापस जाता है।

कुछ त्वरित परीक्षणों से यह भी पता चला कि यह हो सकता है कि jQuery यह कैसे प्रबंधित करता है (कम से कम सभी पृष्ठों तत्वों पर स्क्रॉल को ट्रैक करने के लिए), लेकिन मैं 100% निश्चित नहीं हूं।

यहाँ एक JSFiddle वेनिला दिखा रहा है जावास्क्रिप्ट विधि http://jsfiddle.net/0qpq8pcf/

स्रोत

2015-03-03 14:56:36 eclipse1121

पहले दृष्टिकोण से सावधान रहें, क्योंकि ईवेंट श्रोताओं को प्रत्येक एकल डीओएम तत्व से जोड़ना चीजें बहुत धीमी कर सकती हैं (उल्लेख नहीं है कि यह इवेंट हैंडलर बनाने के बाद जोड़े गए तत्वों के लिए जिम्मेदार नहीं है)। दूसरा संभवतः बेहतर है, लेकिन जब भी संभव हो, आपको इसे हटा देना चाहिए, यदि संभव हो तो (यदि आप केवल यह जानना चाहते हैं कि पॉपअप या कुछ को कब खारिज करना है, तो पॉपअप खुला होने पर इसे केवल अटैचमेंट करें और इसे हटा दें पॉपअप बंद हो जाता है)। –

'कब्जा' के बजाय 'बुदबुदाती' जब घटना संलग्न का उपयोग करेंगे आधुनिक ब्राउज़र में सभी स्क्रॉल ईवेंट पता लगाने के लिए सबसे आसान तरीका:

window.addEventListener('scroll', function(){ code goes here }, true)

दुर्भाग्य से मुझे पता है कि पुराने ब्राउज़र में < = IE8

स्रोत

2015-10-05 17:37:28

इसके लिए बहुत सराहना – CWitty

निम्न कार्य ठीक है जब आप बैकग्राउ में कुछ भी करने के बाद संवाद बंद करना चाहते हैं nd स्क्रॉल किया गया है:

var scrollListener = function(e) { 
    // TODO: hide dialog 
    document.removeEventListener('scroll', scrollListener, true); 
}; 

document.addEventListener('scroll', scrollListener, true);

स्रोत

2016-11-04 09:58:11

उत्तर

संबंधित मुद्दे