स्क्रॉल-ट्रिगर प्रभावों के लिए IntersectionObserver

IntersectionObserver एपीआई यह कुशलता से देखता है कि एक या अधिक तत्व ब्राउज़र के दृश्य क्षेत्र (या निर्दिष्ट पूर्वज तत्व) में प्रवेश कर रहे हैं या उससे बाहर जा रहे हैं। हर पिक्सेल पर चलने वाले स्क्रॉल श्रोताओं के विपरीत, ऑब्ज़र्वर केवल तब आपके कॉलबैक को कॉल करता है, जब तत्व किसी सीमा को पार करता है। इससे स्क्रॉल-आधारित प्रभावों का प्रदर्शन बहुत बेहतर रहता है।

कॉलबैक को IntersectionObserverEntry ऑब्जेक्ट्स की एक सारणी प्राप्त होती है, जिसमें प्रत्येक निगरानी किए गए तत्व के लिए एक ऑब्जेक्ट होता है। प्रत्येक प्रविष्टि में एक isIntersecting बूलियन होता है (दिखाई देने पर सत्य) और 0 से 1 के बीच intersectionRatio संख्या होती है (इस समय दिखाई दे रहे तत्व का अंश)। दृश्यता की स्थिति निर्धारित करने के लिए इनका उपयोग करें।

useEffect के भीतर ऑब्ज़र्वर बनाएँ और तत्व की निगरानी शुरू करने के लिए observer.observe(ref.current) कॉल करें। जिस DOM तत्व की निगरानी करनी है, उससे ref जोड़ना आवश्यक है। घटक के माउंट होने के बाद ऑब्ज़र्वर बनाएँ, ताकि ref.current में मान मौजूद हो।

useEffect के साफ़-सफ़ाई फ़ंक्शन में किसी विशिष्ट तत्व की निगरानी रोकने के लिए observer.unobserve(element) या सभी निगरानियाँ रोकने के लिए observer.disconnect() कॉल करें। साफ़-सफ़ाई भूलने पर घटक के हटाए जाने के बाद भी ऑब्ज़र्वर बना रहता है, जिससे संभावित रूप से त्रुटियाँ या मेमोरी लीक हो सकते हैं।

threshold विकल्प यह नियंत्रित करता है कि कॉलबैक कब चले। 0 का मान तत्व का कोई भी पिक्सेल दिखाई देते ही कॉलबैक चलाता है। 1 का मान केवल तब कॉलबैक चलाता है, जब तत्व पूरी तरह दिखाई दे। दृश्यता के कई स्तरों पर कॉलबैक पाने के लिए आप [0, 0.5, 1] जैसी सारणी भी दे सकते हैं।

rootMargin CSS-जैसे लेखन-विन्यास का उपयोग करके प्रभावी प्रतिच्छेदन क्षेत्र को बढ़ाता या घटाता है: '100px 0px' तत्व के दृश्य क्षेत्र में प्रवेश करने से 100px पहले कॉलबैक चलाता है। तत्व के दृश्य क्षेत्र के अंदर 100px आने पर ही कॉलबैक चलाने के लिए '-100px' का उपयोग करें। यह तत्व के पूरी तरह दिखाई देने से पहले उसे प्रीलोड करने या ऐनिमेट करने के लिए उपयोगी है।

चित्रों को आवश्यकता पड़ने पर लोड करने के लिए, शुरुआत में src के बजाय data-src विशेषता सेट कीजिए। जब isIntersecting: true के साथ ऑब्ज़र्वर सक्रिय हो, तो नेटवर्क अनुरोध शुरू करने के लिए data-src को src में कॉपी कीजिए। इसके बाद observer.unobserve(entry.target) कॉल कीजिए, क्योंकि चित्र को केवल एक बार लोड करना आवश्यक है।

फ़ेड-इन एनिमेशन के लिए, जब isIntersecting का मान सत्य हो जाए, तो एक CSS क्लास जोड़िए: element.classList.add('visible')। CSS में संक्रमण इस प्रकार परिभाषित कीजिए: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } और .card.visible { opacity: 1; transform: none; }। ऑब्ज़र्वर इस सक्रियण को कुशलता से करता है।

दृश्यता की निगरानी के लिए IntersectionObserver आदर्श है। जब data-analytics-id विशेषता वाला कोई तत्व 0.5 की सीमा पर दृश्य क्षेत्र से प्रतिच्छेद करने लगे, तो विश्लेषणात्मक घटना सक्रिय कीजिए। इससे यह सटीक रूप से मापा जाता है कि उपयोगकर्ताओं ने वास्तव में सामग्री के कौन-से खंड पढ़े, और यह केवल स्क्रॉल की गई गहराई के प्रतिशत की तुलना में कहीं अधिक विश्वसनीय है।

एक ही IntersectionObserver ऑब्जेक्ट कई तत्वों की निगरानी कर सकता है; इसके लिए प्रत्येक तत्व पर observer.observe(element) कॉल कीजिए। सभी निगरानी किए गए तत्व समान कॉलबैक और विकल्प साझा करते हैं। किस तत्व ने सूचना सक्रिय की, यह पहचानने के लिए कॉलबैक के भीतर entry.target का उपयोग कीजिए।

पुनः उपयोग योग्य useInView हुक [ref, inView] लौटाता है। किसी भी तत्व पर ref लगाइए और यह जानने के लिए inView पढ़िए कि वह इस समय दिखाई दे रहा है या नहीं। हुक सीमा और rootMargin के लिए एक options ऑब्जेक्ट स्वीकार करता है। यह अमूर्तीकरण किसी भी घटक में स्क्रॉल प्रभावों को घोषणात्मक बनाता है।

IntersectionObserver isIntersecting और intersectionRatio का उपयोग करके तत्व की दृश्यता की कुशलता से निगरानी करता है। हमेशा निगरानी हटाकर या कनेक्शन समाप्त करके सफाई कीजिए। सक्रियण बिंदु नियंत्रित करने के लिए सीमा का और पहचान क्षेत्र बढ़ाने के लिए rootMargin का उपयोग कीजिए। इसे आवश्यकता पड़ने पर लोड करने, एनिमेशन और विश्लेषणात्मक निगरानी के लिए लागू कीजिए।