HTML Academy · पाठ

IntersectionObserver API और Thresholds

ऑब्ज़र्वर बनाएँ और दृश्यता सीमाएँ कॉन्फ़िगर करें

पाठ 1, कुल 4 में से13 चरण

IntersectionObserver API और Thresholds, CoddyKit पर HTML Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह HTML Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

IntersectionObserver क्या करता है

IntersectionObserver तब कॉलबैक चलाता है जब कोई तत्व दृश्य क्षेत्र (या किसी अन्य स्क्रोल कंटेनर) में प्रवेश करता है या उससे बाहर निकलता है। यह स्क्रोल श्रोताओं का आधुनिक और उच्च-प्रदर्शन वाला विकल्प है — गणना ब्राउज़र करता है और आपका कोड केवल वास्तविक दृश्यता-परिवर्तनों पर चलता है।

निर्माण

new IntersectionObserver(callback, options) एक observer बनाता है। प्रतिच्छेदन बदलने पर कॉलबैक को entries की एक सारणी मिलती है; options यह नियंत्रित करते हैं कि किस कंटेनर को देखा जाए और किन दहलीज़ों पर प्रतिक्रिया दी जाए।

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log("Visible:", entry.target);
    }
  }
});
observer.observe(document.querySelector(".hero"));

IntersectionObserverEntry का परिचय

हर entry में target (देखा जा रहा तत्व), isIntersecting (बूलियन), intersectionRatio (0 से 1 तक), boundingClientRect, intersectionRect और time होते हैं। द्विआधारी दृश्यता-जाँच के लिए isIntersecting और प्रतिशत दृश्यता पर आधारित तर्क के लिए intersectionRatio का उपयोग करें।

दहलीज़ विकल्प

{ threshold: 0.5 } तब कॉलबैक चलाता है जब प्रतिच्छेदन अनुपात 50% को पार करता है। हर चौथाई पर प्रतिक्रिया देने के लिए [0, 0.25, 0.5, 0.75, 1] जैसी सारणी का उपयोग करें — यह प्रगति-सूचक बनाने या "% दृश्यमान" की सूचना देने वाले विश्लेषण के लिए उपयोगी है।

मूल विकल्प

डिफ़ॉल्ट रूप से observer दृश्य क्षेत्र के साथ प्रतिच्छेदन को मापता है। किसी आंतरिक स्क्रोल कंटेनर के सापेक्ष मापने के लिए root: someScrollableDiv सेट करें — जैसे निश्चित ऊँचाई वाले div के भीतर की आभासी सूची।

rootMargin विकल्प

rootMargin: "200px" हर दिशा में देखने का क्षेत्र 200 पिक्सेल बढ़ा देता है। इसका उपयोग पहले प्रतिक्रिया देने के लिए करें (चित्रों को दृश्य क्षेत्र में आने से 200 पिक्सेल पहले लोड करना शुरू करें) या देर से प्रतिक्रिया देने के लिए (केवल दृश्य क्षेत्र से पूरी तरह बाहर जाने पर प्रतिक्रिया दें)।

new IntersectionObserver(callback, {
  rootMargin: "0px 0px 200px 0px",
  threshold: 0
});

observe और unobserve

observer.observe(element) किसी तत्व को देखना शुरू करता है; observer.unobserve(element) इसे रोकता है। जब कॉलबैक की आवश्यकता न रहे, तब हमेशा निगरानी बंद करें (जैसे एक बार विलंबित लोडिंग शुरू होने के बाद), ताकि स्मृति मुक्त की जा सके।

कनेक्शन समाप्त करना

observer.disconnect() देखे जा रहे सभी तत्वों की निगरानी रोकता है। घटक हटाए जाने पर या observer की आवश्यकता न रहने पर इसे चलाएँ — इससे ऐसे observer के कारण होने वाले रिसाव रुकते हैं जो अपने उपयोग-क्षेत्र से अधिक समय तक जीवित रहते हैं।

असिंक्रोनस प्रेषण

कॉलबैक असिंक्रोनस रूप से और समूहों में भेजे जाते हैं — तेज़ स्क्रोल के दौरान हुए कई प्रतिच्छेदन परिवर्तन एक ही कॉलबैक में सभी entries के साथ आते हैं, हर तत्व के लिए अलग-अलग नहीं। हर स्क्रोल घटना पर चलने वाले स्क्रोल श्रोताओं की तुलना में यह प्रदर्शन में बड़ा लाभ है।

प्रारंभिक कॉलबैक तुरंत चलता है

जब आप किसी नए तत्व को observe करते हैं, तो वर्तमान स्थिति के साथ कॉलबैक लगभग तुरंत एक बार चलता है — इससे उन तत्वों को संभालना आसान होता है जो निगरानी शुरू होने के समय पहले से दिखाई दे रहे हों, और अलग आरंभीकरण मार्ग की आवश्यकता नहीं पड़ती।

सामान्य उपयोग के मामले

चित्रों की विलंबित लोडिंग, स्क्रोल करके दृश्य क्षेत्र में आने पर ऐनिमेशन शुरू करना, अनंत स्क्रोलिंग (सूची के अंत के पास sentinel को देखना), उपयोगकर्ता द्वारा वास्तव में पढ़े गए लेखों को ट्रैक करना और मुख्य बैनर की दृश्यता के आधार पर स्टिकी हेडर को बदलना।

ज्ञान-जाँच

IntersectionObserver में दहलीज़: 0 और दहलीज़: 1 के बीच क्या अंतर है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

IntersectionObserver तत्व की दृश्यता में बदलाव पर कॉलबैक चलाता है और प्रदर्शन तथा समूह-प्रसंस्करण पहले से उपलब्ध कराता है — दृश्यता संबंधी तर्क के लिए स्क्रोल श्रोताओं के स्थान पर इसका उपयोग करें। इसे दहलीज़ (0 से 1 तक या सारणी), मूल (कस्टम स्क्रोल कंटेनर) और rootMargin (देखे जाने वाले क्षेत्र को बढ़ाने या घटाने) से कॉन्फ़िगर करें। विशिष्ट तत्वों के लिए observe/unobserve का उपयोग करें; कनेक्शन समाप्त करना सब कुछ साफ़ कर देता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “IntersectionObserver API और Thresholds” पाठ निःशुल्क है?

हाँ — HTML Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “IntersectionObserver API और Thresholds” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। HTML Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“IntersectionObserver API और Thresholds” में मैं क्या सीखूँगा?

ऑब्ज़र्वर बनाएँ और दृश्यता सीमाएँ कॉन्फ़िगर करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ HTML Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या HTML Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर HTML Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“IntersectionObserver API और Thresholds” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस HTML Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर HTML Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← HTML Academy पर वापस जाएँ