रॉ JavaScript के साथ यह पता लगाना सीखें कि यूज़र कब पेज के निचले भाग की ओर स्क्रॉल करता है।
कभी-कभी आप एक इवेंट ट्रिगर करना चाहते हैं, जब यूज़र किसी पेज या विशिष्ट सेक्शन के निचले भाग तक स्क्रॉल कर चुका हो।
स्क्रॉल टू बॉटम डिटेक्शन (सभी आधुनिक ब्राउज़र्स में काम करता है, IE9 और ऊपर)
window.onscroll = function() { if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) { alert("At the bottom!") } }एज केस समाधान:
यदि पहला काम न करे, तो window.pageYOffset पर Math.ceil() मेथड का उपयोग करने का प्रयास करें:
window.onscroll = function() { if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) { alert('At the bottom!') } }Math.ceil का उपयोग करने का कारण यह है कि कुछ ब्राउज़र्स एलिमेंट्स पर सबपिक्सेल प्रिसिजन का उपयोग करते हैं। उदाहरण के लिए, चौड़ाई या ऊंचाई 500.25px हो सकती है।
Math.ceil ऊपर की ओर राउंड करेगा, उदाहरण के लिए 1.45px 2px हो जाता है।
कुछ मैक कंप्यूटर्स के साथ भी एक समस्या है, जो विंडो ऊंचाई को 1px से ऑफसेट करते हैं। इसके चारों ओर काम करने के लिए आप डॉक्यूमेंट ऊंचाई से कुछ पिक्सेल घटा सकते हैं:
(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2नोट: scrollY का उपयोग अक्सर pageYOffset के बजाय किया जाता है। लेकिन scrollY इंटरनेट एक्सप्लोरर में काम नहीं करता। आधुनिक क्रॉस-ब्राउज़र कम्पैटिबिलिटी के लिए, pageYOffset का उपयोग करें।
यहाँ एक कार्यशील उदाहरण दिखाने वाला CodePen है।
यदि आप window.innerHeight, window.pageYOffset, और document.body.offsetHeight के बीच संबंध के बारे में भ्रमित हैं तो यहाँ एक छोटा हेल्पर फ़ंक्शन है जो प्रत्येक का पिक्सेल वैल्यू लॉग करता है जब आप स्क्रॉल करते हैं:
window.onscroll = function() { console.log('Window height (px):', window.innerHeight) console.log('Currently scrolled from top (px):', window.pageYOffset) console.log('Document height(px):', document.body.offsetHeight) }इससे यह समझना आसान हो जाएगा कि स्क्रॉल डिटेक्शन फ़ंक्शन कैसे काम करता है। प्रारंभ में pageYOffset ने मुझे भ्रमित किया। यह शीर्ष से वर्तमान में लंबवत रूप से स्क्रॉल किए गए पिक्सेल्स की संख्या को संदर्भित करता है।
