जब उपयोगकर्ता jQuery के साथ Div के नीचे स्क्रॉल करता है तो कैसे पता लगाएं

आपने गतिशील सामग्री के साथ एक div तत्व बनाया है जिसमें " ऑटो" अतिप्रवाह सेटिंग। उपयोगकर्ता अनुभव को बढ़ाने के लिए, जब उपयोगकर्ता इस div बॉक्स के नीचे स्क्रॉल करता है तो आप अतिरिक्त सामग्री लोड करना चाहते हैं। हालाँकि, आप अनिश्चित हैं कि उस विशिष्ट घटना का पता कैसे लगाया जाए।

इस पता लगाने की कुंजी विशिष्ट jQuery गुणों और विधियों का उपयोग करने में निहित है:

• $().scrollTop(): तत्व को स्क्रॉल किए गए पिक्सेल की संख्या को इंगित करता है
• $().innerHeight(): की आंतरिक ऊंचाई का प्रतिनिधित्व करता है तत्व
• DOMElement.scrollHeight: तत्व की सामग्री की ऊंचाई लौटाता है

यह निर्धारित करने के लिए कि उपयोगकर्ता div के निचले भाग तक कब पहुंच गया है, आप पहले दो गुणों के योग की तुलना कर सकते हैं तीसरी संपत्ति के लिए. जब ये मान मेल खाते हैं, तो div का अंत पहुंच गया है।

jQuery(function($) {
    $('#flux').on('scroll', function() {
        if($(this).scrollTop()   $(this).innerHeight() >= $(this)[0].scrollHeight) {
            alert('end reached');
        }
    })
});

यह समाधान on() विधि का उपयोग करता है, जिसे jQuery संस्करण 1.7 में इवेंट हैंडलिंग के लिए प्राथमिकता दी जाती है।

अतिरिक्त नोट्स:

• ईवेंट श्रोता #flux आईडी के साथ div से जुड़ा हुआ है, जो उस तत्व का प्रतिनिधित्व करता है जिसमें आप रुचि रखते हैं निगरानी।
• अलर्ट() फ़ंक्शन का उपयोग प्रदर्शन उद्देश्यों के लिए किया जाता है। आप यहां अतिरिक्त सामग्री लोड करने के लिए अपना तर्क शामिल कर सकते हैं।
• एक जीवंत उदाहरण http://jsfiddle.net/doktormolle/w7X9N/ पर पाया जा सकता है।