अस्वीकरण - लेखन के समय मैं ही था लक्ष्यीकरण क्रोम ब्राउज़र.
जब एक उपयोगकर्ता स्क्रॉल एक डोम स्क्रॉल घटना निकाल दिया जाता है, एक घटना में बनाया गया है जो कभी भी ब्राउज़र डिफ़ॉल्ट रूप से । प्रतिक्रिया यह है खुद के विधि, onScroll, कहा जा सकता है जो किसी भी घटक पर जब स्क्रॉल घटना निकाल दिया जाता है. इस का उपयोग कर onScroll विधि हम कर सकते हैं एक समारोह कॉल एक परिणाम के रूप में एक उपयोगकर्ता स्क्रॉल.
उदाहरण;
<SomeComponent onScroll={someMeothod} />
के रूप में किसी भी डोम घटना, एक घटना वस्तु के साथ बनाया जाता है गुण प्रदान कर सकते हैं कि उपयोगी जानकारी के बारे में घटना और तत्व ने घटना से संबंधित भी है. एक स्क्रॉल घटना निकाल दिया जाता है हर पिक्सेल के लिए एक उपयोगकर्ता स्क्रॉल. इस मामले में, हम कर रहे हैं के साथ संबंध की पहचान करने के लिए जब उपयोगकर्ता स्क्रॉल के अंत करने के लिए मूल तत्व युक्त हमारे सामग्री.
की गणना के लिए जब उपयोगकर्ता स्क्रॉल के अंत करने के लिए एक कंटेनर
जोड़ें एक onScroll विधि करने के लिए तत्व युक्त सामग्री है जो एक समारोह कॉल घटकों पर वर्ग:
<div className="content-container" onScroll={this.handleScroll}>
// Your content
</div>
तो बनाने handleScroll समारोह को संभालने के लिए स्क्रॉल घटना:
class MyComponent extends React.Component {
handleScroll = e => {
let element = e.target
if (element.scrollHeight - element.scrollTop === element.clientHeight) {
// do something at end of scroll
}
}
render() {
return (
<div className="content-container" onScroll={this.handleScroll}>
// Your content
</div>
)
}
}
चलो तोड़ने के नीचे क्या हो रहा है में handleScroll विधि बनाने के लिए, चीजों को थोड़ा स्पष्ट...
ई - इस से मेल खाती है, घटना ही है । यह एक वस्तु है कि है के द्वारा बनाई गई के साथ ब्राउज़र के गुणों से संबंधित करने के लिए स्क्रॉल घटना हम साथ काम कर रहे हैं.
चलो तत्व = ई.लक्ष्य - यह हमें की अनुमति देता है खोजने के लिए जो तत्व भेजा घटना का उपयोग (ई.लक्ष्य) को आवंटित करने के लिए चर जो हम में उपयोग कर सकते हैं कोड के बाकी.
अब हम (हमारे कोड) जानता है जो तत्व है scrolled जा रहा है और हम सौंपा है यह करने के लिए एक चर में हमारे तरीकों गुंजाइश है, हम का उपयोग कर सकते हैं के गुण है कि तत्व द्वारा दिए गए ब्राउज़र और गणना, तो उपयोगकर्ता स्क्रॉल करने के लिए अंत.
तत्व.scrollHeight - इस ऊंचाई पिक्सल में तत्वों की सामग्री, सहित सामग्री नहीं स्क्रीन पर दिखाई कारण के लिए सीएसएस अतिप्रवाह.
तत्व.scrollTop - ऊंचाई पिक्सल में है कि एक तत्व की सामग्री है, खड़ी scrolled.
तत्व.clientHeight - ऊंचाई में पिक्सल के स्क्रॉल के हिस्से के तत्व है ।
उपयोग उपरोक्त गुणों, हम गणना कर सकते हैं यदि उपयोगकर्ता स्क्रॉल करने के लिए नीचे तत्व की तुलना द्वारा नकारात्मक राशि के scrollHeight और scrollTop के लिए clientHeight. अगर वे कर रहे हैं वही कर रहे हैं, उपयोगकर्ता स्क्रॉल के नीचे करने के लिए तत्व । लपेटकर द्वारा इस में एक if बयान में हम कर सकते हैं, इसलिए सुनिश्चित करें कि हमारे समारोह के भीतर अगर बयान की गुंजाइश है, केवल चलाने के लिए जब उपयोगकर्ता स्क्रॉल के अंत करने के लिए div और हमारे if हालत से मुलाकात की है ।
