अनंत स्क्रॉल क्या है?

आपने पहले ही ऑनलाइन स्टोर जैसी साइटें देखी होंगी, जहां जैसे ही आप पृष्ठ को नीचे स्क्रॉल करते हैं, उत्पाद लगातार दिखाई देते हैं। एक अन्य उदाहरण अंतहीन.घोड़ा है, यह सरल लग सकता है लेकिन यह "अनंत स्क्रॉल" की कार्यक्षमता को प्रदर्शित करने के लिए एक उत्कृष्ट उदाहरण है। जब आप वेबसाइट पर पहुंचते हैं, तो आपको एक घोड़ा दिखाई देता है, लेकिन जब आप पृष्ठ को नीचे स्क्रॉल करते हैं, तो आपको पता चलता है कि घोड़े के पैर अनिश्चित काल तक बढ़ते रहते हैं, और आप कभी भी घोड़े के पैरों तक नहीं पहुंच पाते।

अनंत स्क्रॉल को कार्यान्वित करना

इस कार्यक्षमता का आधुनिक विकास में व्यापक रूप से उपयोग किया जाता है। हम ट्विटर, फेसबुक और विशेष रूप से इंस्टाग्राम जैसे प्रमुख सामाजिक नेटवर्क पर अनंत स्क्रॉलिंग देख सकते हैं, जहां पृष्ठ को नीचे स्क्रॉल करने पर सामग्री कभी समाप्त नहीं होती है।

इस लेख में, मैं इस कार्यक्षमता का एक बुनियादी कार्यान्वयन प्रदर्शित करूंगा। हालाँकि, यह दृष्टिकोण लंबी क्वेरी, कैशिंग कार्यान्वयन और उत्पादन अनुप्रयोगों के लिए आवश्यक अन्य समाधान जैसे मुद्दों का समाधान नहीं करता है। फिर भी, यह समझने के लिए एक प्रारंभिक बिंदु है कि हम इस सुविधा को कैसे कार्यान्वित कर सकते हैं।

चरण 1: तय करें कि अनंत स्क्रॉल कार्यक्षमता कहां जोड़नी है

सबसे पहले, तय करें कि आप अनंत स्क्रॉल कार्यक्षमता कहां जोड़ेंगे। क्या यह पोस्ट या छवियों की सूची होगी? आपको यह भी तय करना होगा कि डेटा कहाँ से आएगा। इस उदाहरण के लिए, हम एक बुनियादी एपीआई, रैंडम फॉक्स एपीआई से छवियों का उपयोग करेंगे।

चरण 2: अपनी HTML फ़ाइल बनाएं

HTML फ़ाइल बनाएं और अपनी यादृच्छिक लोमड़ी छवियों के लिए एक कंटेनर शामिल करें।

Fox Images

चरण 3: अपनी सीएसएस फ़ाइल बनाएं

इस उदाहरण के लिए, हम स्टाइलशीट को बहुत सरल रखेंगे।

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

चरण 4: अपनी जावास्क्रिप्ट फ़ाइल बनाएं

कंटेनर का चयन करें और रैंडम फॉक्स एपीआई यूआरएल प्राप्त करें। अपनी JavaScript और CSS फ़ाइलों को HTML में लिंक करना न भूलें।

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i 




  
  
  चरण 5: स्क्रॉल इवेंट जोड़ें


अनंत स्क्रॉल कार्यक्षमता लागू करने के लिए, इस ईवेंट श्रोता को जोड़ें:


window.addEventListener('scroll', () => {
  if (window.scrollY   window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});




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


  
  
  निष्कर्ष


आपका पृष्ठ अब अनंत स्क्रॉल तकनीक के साथ कार्यात्मक होना चाहिए। यहां आपके लिए एक चुनौती है: अपनी पसंद के किसी अन्य एपीआई का उपयोग करके इस प्रोजेक्ट को फिर से करने का प्रयास करें, अपने आइटम प्रदर्शित करने के लिए कुछ और विस्तृत शैली भी लागू करें। आपको कामयाबी मिले!