चौराहा पर्यवेक्षक | अपने वेब एप्लिकेशन में अनंत स्क्रॉल बनाना

Nov 25 2022

Unsplash पर SpaceX द्वारा फोटो

यदि आप एक गुफा वाले व्यक्ति नहीं हैं या आप जेफ बेजोस से नफरत नहीं करते हैं (इससे कोई फर्क नहीं पड़ता कि आप करते हैं) तो आपने ऑनलाइन खरीदारी की होगी। जब आप इन ऑनलाइन दुकानों पर किसी वस्तु की खोज करते हैं, तो आपको परिणामों की सूची के साथ प्रस्तुत किया जाता है। यदि आप मेरी तरह अजीब नहीं हैं और " मानव रक्त में लथपथ बाघ के दांत " की तलाश नहीं कर रहे हैं , जो बहुत विशिष्ट है, तो संभावना है कि आपकी खोज क्वेरी को हजारों उत्पाद मिलेंगे। क्या आपको लगता है कि आपका ब्राउज़र इन सभी 1000+ वस्तुओं को एक साथ लोड करता है? नहीं , ब्राउज़र के लिए यूजर इंटरफेस को संभालने और गणना करने के लिए यह बहुत अधिक डेटा होगा। फिर भी, आप आइटम प्राप्त करना जारी रखते हैं क्योंकि आप अपने परिणाम के अंत तक पहुँचते रहते हैं। इसे अनंत स्क्रॉल कहा जाता है ।

यहां YouTube होम पेज पर अनंत स्क्रॉल का उदाहरण दिया गया है।

Gif अनंत स्क्रॉल की व्याख्या करता है

जावास्क्रिप्ट का उपयोग करके इसे प्राप्त करने के लिए कई तकनीकें हैं, लेकिन इंटरसेक्शनऑब्जर्वर नामक एक स्वीट वेब एपीआई का उपयोग करने वाली सबसे कुशल तकनीक है। आइए देखें कि इस एपीआई का उपयोग हमारी खुद की एक मिनी अनंत स्क्रॉल करने योग्य सूची को लागू करने के लिए कैसे करें।

अवधारणा है, व्यूपोर्ट में हर बार एक HTML तत्व का अवलोकन करना और फिर कॉलबैक को ट्रिगर करना। इस पर्यवेक्षक को बनाने का तरीका यहां दिया गया है।

चलिए एक html फाइल बनाते हैं जो इस तरह दिखती है।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinte Scroll</title>
</head>
<style>
    .product {
        padding: 20px;
        border: 1px solid black;
        margin-bottom: 20px;
        opacity: 0;
        margin-left: 100px;
        transition: all 300ms;
    }
    .visible {
        opacity: 1;
        margin-left: 0px;
    }
</style>
<body>
    <div id="container">
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
        <div class="product">Product</div>
    </div>

    <script src="./index.js"></script>
</body>
</html>

पहले आइए सभी उत्पाद कार्डों को उनके वर्ग के नाम से प्राप्त करें

const cards = document.querySelectorAll('.product');

const productCards= document.querySelectorAll('.product');

const observer = new IntersectionObserver((entries) => {
    // Todo
}, {
    threshold: 0.95,
});

productCards.forEach((card) => {
  observer.observe(card);
})

कंस्ट्रक्टर में एक अन्य पैरामीटर एक वस्तु है। ये वस्तु इस विशेष पर्यवेक्षक के विकल्पों को दर्शाती है। इस मामले में, हमारे पास केवल दहलीज है। थ्रेशोल्ड यहां एक संख्या है जो 0 से 1 तक कोई भी मान ले सकती है। यह उस आइटम के प्रतिशत को दर्शाता है जिसे हम देख रहे हैं जो व्यूपोर्ट में दिखाई देना चाहिए ताकि इसे इंटरसेक्टिंग माना जा सके। हमने इसे 0.95 का मान दिया है जिसका अर्थ है कि जब किसी उत्पाद कार्ड का 95% व्यूपोर्ट में आएगा, तो उस कार्ड को व्यूपोर्ट के साथ इंटरसेक्टिंग माना जाएगा।

आइए अपनी index.html फाइल पर वापस जाएं । हमारे पास स्टाइल टैग में परिभाषित एक और स्टाइल क्लास भी है । यह स्टाइल, जब हमारे उत्पाद कार्ड पर लागू किया जाता है, तो कार्ड को थोड़ा एनीमेशन ( संक्रमण संपत्ति) के साथ फिर से दिखाई देगा।

आइए अपने प्रेक्षक में ऐसे परिवर्तन करें कि, सभी उत्पाद कार्ड जो व्यूपोर्ट में कम से कम 95% हैं, दिखाई देंगे और बाकी छिपे रहेंगे।

const productCards = document.querySelectorAll('.product');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        entry.target.classList.toggle('visible', entry.isIntersecting);
    })
}, {
    threshold: 0.95
});

productCards.forEach((card) => {
    observer.observe(card);
});

हालांकि एक कैच है। जब हम ऊपर स्क्रॉल करते हैं, क्योंकि हमारे पास दृश्य वर्ग को टॉगल करने के लिए एक तर्क है जब आइटम प्रतिच्छेद कर रहा है, यह इस वर्ग को भी हटा देता है जब यह नहीं होता है। इसलिए, जब हम ऊपर स्क्रॉल करते हैं, तो हम देखते हैं कि हमारे कार्ड ऊपर से गायब हो रहे हैं। इसे ठीक करने के लिए, हम उन कार्डों को देखना बंद कर देंगे जो पहले ही काट चुके हैं।

const productCards = document.querySelectorAll('.product');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        entry.target.classList.toggle('visible', entry.isIntersecting);
        // unobserving entries which have already intersected
        if (entry.isIntersecting) observer.unobserve(entry.target);
    })
}, {
    threshold: 0.95
});

productCards.forEach((card) => {
    observer.observe(card);
});

सबसे पहले, हम एक और ऑब्जर्वर बनाएंगे जो अंतिम कार्ड को देखेगा।

const lastCardObserver = new IntersectionObserver((entries) => {
    const lastCard = entries[0];
    if (!lastCard.isIntersecting) return;
    loadMoreCards();
    lastCardObserver.unobserve(lastCard.target);
    lastCardObserver.observe(document.querySelector('.product:last-child'));
}, {
    threshold: 0.95
});

lastCardObserver.observe(document.querySelector('.product:last-child'));

function loadMoreCards() {
    const container = document.getElementById('container');
    for (let i = 0; i < 10; i++) {
        const element = document.createElement('div');
        element.classList.add('product');
        element.innerText = 'Product';
        observer.observe(element);
        container.appendChild(element);
    }
}

यह अब कैसा दिखता है!

बिल्कुल सही अनंत स्क्रॉल!

अब, वास्तविक दुनिया के अनुप्रयोगों में, अधिक कार्ड लोड करने के बजाय हम एपीआई का उपयोग करके नया डेटा प्राप्त करेंगे।

मुझे बताएं कि आप इस एपीआई का उपयोग अपने ऐप्लिकेशन में रचनात्मक रूप से कैसे कर सकते हैं।