कैसे पता लगाया जाए कि कोई उपयोगकर्ता जावास्क्रिप्ट के साथ किसी पृष्ठ के नीचे स्क्रॉल करता है

जानें कि कैसे पता लगाया जाए कि कोई उपयोगकर्ता कच्चे जावास्क्रिप्ट वाले पृष्ठ के नीचे की ओर स्क्रॉल करता है।

कभी-कभी आप किसी ईवेंट को ट्रिगर करना चाहते हैं, जब उपयोगकर्ता किसी पृष्ठ या किसी विशिष्ट अनुभाग के नीचे स्क्रॉल करता है।

स्क्रॉल टू बॉटम डिटेक्शन (सभी आधुनिक ब्राउज़रों में काम करता है, IE9 और ऊपर)

window.onscroll = function() {
 if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
  alert("At the bottom!")
 }
}

एज केस समाधान:

यदि पहला काम नहीं करता है, तो Math.ceil() . का उपयोग करके देखें window.pageYOffset . पर विधि :

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 . का उपयोग करें ।

यहां एक कोडपेन एक कार्यशील उदाहरण दिखा रहा है।

यदि आप 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 मुझे भ्रमित कर दिया। यह वर्तमान . की संख्या को दर्शाता है पिक्सेल ऊपर से लंबवत स्क्रॉल करते हैं।