अनंत स्क्रॉल के सिद्धांतों और व्यावहारिकताओं के बारे में जानें।

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

सादे HTML, CSS और JavaScript का उपयोग करके अनंत स्क्रॉल सेट करने का तरीका जानें।

फ्रंटएंड की स्थापना

अपनी सामग्री प्रदर्शित करने के लिए एक बुनियादी HTML संरचना से शुरुआत करें। यहाँ एक उदाहरण है:

html>
<html>
<head>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<h1>Infinite Scroll Pageh1>
<divclass="products__list">
<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />


<imgsrc="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
 alt="Jacket" />
div>





instagram viewer

<scriptsrc="script.js">script>
body>
html>

इस पृष्ठ में प्लेसहोल्डर छवियों की एक श्रृंखला है और दो संसाधनों का संदर्भ है: एक सीएसएस फ़ाइल और एक जावास्क्रिप्ट फ़ाइल।

स्क्रॉल करने योग्य सामग्री के लिए सीएसएस स्टाइलिंग

प्लेसहोल्डर छवियों को ग्रिड में प्रदर्शित करने के लिए, निम्नलिखित सीएसएस को अपने में जोड़ें स्टाइल.सीएसएस फ़ाइल:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }


body {
font-family: Cambria, Times, "TimesNewRoman", serif;
}


h1 {
text-align: center;
font-size: 5rem;
padding: 2rem;
}


img {
width: 100%;
display: block;
}


.products__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}


.products__list > * {
width: calc(33% - 2rem);
}


.loading-indicator {
display: none;
position: absolute;
bottom: 30px;
left: 50%;
background: #333;
padding: 1rem 2rem;
color: #fff;
border-radius: 10px;
transform: translateX(-50%);
}

फिलहाल, आपका पेज इस तरह दिखना चाहिए:

जेएस के साथ मुख्य कार्यान्वयन

संपादन करना स्क्रिप्ट.जे.एस. अनंत स्क्रॉल को लागू करने के लिए, आपको यह पता लगाना होगा कि उपयोगकर्ता ने सामग्री कंटेनर या पृष्ठ के निचले भाग के पास कब स्क्रॉल किया है।

"use strict";
window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
 ) {
// User is near the bottom, fetch more content
 fetchMoreContent();
 }
});

फिर, अधिक प्लेसहोल्डर डेटा लाने के लिए एक फ़ंक्शन बनाएं।

asyncfunctionfetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");
if (!response.ok) {
thrownewError("Network response was not ok");
 }


let data = await response.json();
console.log(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 }
}

इस प्रोजेक्ट के लिए, आप एपीआई का उपयोग कर सकते हैं फ़ेकस्टोरैपी.

यह पुष्टि करने के लिए कि आपका डेटा स्क्रॉल पर लाया जा रहा है, कंसोल पर एक नज़र डालें:

आप देखेंगे कि आपका डेटा स्क्रॉल पर कई बार लाया जा रहा है जो डिवाइस के प्रदर्शन को नुकसान पहुंचाने वाला एक कारक हो सकता है। इसे रोकने के लिए, डेटा की प्रारंभिक फ़ेचिंग स्थिति बनाएं:

let isFetching = false;

फिर, पिछले फ़ेच समाप्त होने के बाद केवल डेटा फ़ेच करने के लिए अपने फ़ेच फ़ंक्शन को संशोधित करें।

asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetching
 isFetching = true; // Set the flag to true


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }
let data = await response.json();
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 isFetching = false; // Reset the flag to false
 }
}

नई सामग्री प्रदर्शित करना

जब उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है तो नई सामग्री प्रदर्शित करने के लिए, एक फ़ंक्शन बनाएं जो छवियों को मूल कंटेनर में जोड़ता है।

सबसे पहले, मूल तत्व का चयन करें:

const productsList = document.querySelector(".products__list");

फिर, सामग्री जोड़ने के लिए एक फ़ंक्शन बनाएं।

functiondisplayNewContent(data) {
 data.forEach((item) => {
const imgElement = document.createElement("img");
 imgElement.src = item.image;
 imgElement.alt = item.title;
 productsList.appendChild(imgElement); // Append to productsList container
 });
}

अंत में, अपने फ़ेच फ़ंक्शन को संशोधित करें और फ़ेच किए गए डेटा को एपेंड फ़ंक्शन में पास करें।

asyncfunctionfetchMoreContent() {
if (isFetching) return;
 isFetching = true;


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }


let data = await response.json();
 displayNewContent(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 isFetching = false;
 }
}

और इसके साथ ही, आपका अनंत स्क्रॉल अब काम करता है।

उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, आप नई सामग्री लाते समय एक लोडिंग संकेतक प्रदर्शित कर सकते हैं। इस HTML को जोड़कर प्रारंभ करें.

<h1class="loading-indicator">Loading...h1>

फिर लोडिंग तत्व का चयन करें।

const loadingIndicator = document.querySelector(".loading-indicator");

अंत में, लोडिंग संकेतक की दृश्यता को चालू करने के लिए दो फ़ंक्शन बनाएं।

functionshowLoadingIndicator() {
 loadingIndicator.style.display = "block";
console.log("Loading...");
}
functionhideLoadingIndicator() {
 loadingIndicator.style.display = "none";
console.log("Finished loading.");
}

फिर, उन्हें फ़ेच फ़ंक्शन में जोड़ें।

asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetching
 isFetching = true;
 showLoadingIndicator(); // Show loader


try {
let response = await fetch("https://fakestoreapi.com/products? limit=3");


if (!response.ok) {
thrownewError("Network response was not ok");
 }
let data = await response.json();
 displayNewContent(data);
 } catch (error) {
console.error("There was a problem fetching new content:", error);
 } finally {
console.log("Fetch function fired");
 hideLoadingIndicator(); // Hide loader
 isFetching = false;
 }
}

जो देता है:

अनुसरण करने योग्य कुछ सर्वोत्तम प्रथाओं में शामिल हैं:

  • एक साथ बहुत सारी चीज़ें न लाएँ. यह ब्राउज़र पर दबाव डाल सकता है और प्रदर्शन को ख़राब कर सकता है।
  • स्क्रॉल ईवेंट का पता चलने पर तुरंत सामग्री लाने के बजाय, डिबाउंस फ़ंक्शन का उपयोग करें लाने में थोड़ी देरी करने के लिए। ये हो सकता है अत्यधिक नेटवर्क अनुरोधों को रोकें.
  • सभी उपयोगकर्ता अनंत स्क्रॉलिंग पसंद नहीं करते. के लिए एक विकल्प प्रस्तुत करें पेजिनेशन घटक का उपयोग करें अगर वांछित है।
  • यदि लोड करने के लिए कोई और सामग्री नहीं है, तो लगातार अधिक सामग्री लाने का प्रयास करने के बजाय उपयोगकर्ता को सूचित करें।

निर्बाध सामग्री लोड करने में महारत हासिल करना

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

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