अनंत स्क्रॉलिंग
उपयोगकर्ता के स्क्रॉल करने पर अधिक सामग्री लोड कीजिए।
अनंत स्क्रॉलिंग, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
अनंत स्क्रॉल क्या है
अनंत स्क्रॉल सूची के निचले हिस्से के पास पहुँचते ही अपने-आप अधिक सामग्री लोड करता है, इसलिए Next Page पर क्लिक करने की आवश्यकता नहीं होती। सोशल फ़ीड और खोज परिणामों में इसका सामान्य रूप से उपयोग होता है।
sentinel तरीका
सबसे व्यवस्थित तकनीक में एक sentinel का उपयोग होता है: सूची के अंत में रखा गया एक खाली तत्व। जब sentinel दृश्य में आता है, तो आप अगला समूह प्राप्त करके जोड़ देते हैं।
// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div> <!-- trigger element -->sentinel की निगरानी करना
इंटरसेक्शन ऑब्ज़र्वर को sentinel पर लक्षित करें। चूँकि यह आखिरी आइटम के बाद रहता है, इसलिए इसका दिखाई देना बताता है कि उपयोगकर्ता अंत तक पहुँच गया है।
const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);लोड सक्रिय करना
कॉलबैक में isIntersecting जाँचें। जब इसका मान true हो, तो डेटा का अगला page लोड करें।
function onIntersect(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreItems();
}
});
}page को ट्रैक करना
एक page काउंटर रखें, ताकि हर लोड अगला भाग प्राप्त करे। सफल fetch के बाद इसे बढ़ाएँ।
let page = 1;
async function loadMoreItems() {
const items = await fetchPage(page);
appendItems(items);
page++;
}दोबारा लोड होने से बचाव
कॉलबैक बार-बार सक्रिय हो सकता है। loading फ़्लैग का उपयोग करें, ताकि एक fetch पहले से जारी होने पर नया fetch शुरू न हो।
let loading = false;
async function loadMoreItems() {
if (loading) return;
loading = true;
const items = await fetchPage(page);
appendItems(items);
page++;
loading = false;
}नए आइटम जोड़ना
प्राप्त किए गए आइटम sentinel से पहले जोड़ें, ताकि बढ़ती हुई सूची के अंत में sentinel बना रहे और अगला लोड सक्रिय करने के लिए तैयार हो।
function appendItems(items) {
const feed = document.getElementById('feed');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item.title;
feed.appendChild(li);
});
}अंत में रुकना
जब सर्वर और डेटा न लौटाए, तो observer को डिस्कनेक्ट कर दें, ताकि वह लोड करने का प्रयास बंद कर दे। इससे खाली अनुरोध लगातार भेजे जाने से बचते हैं।
const items = await fetchPage(page);
if (items.length === 0) {
observer.disconnect(); // no more data
return;
}rootMargin क्यों मदद करता है
एक बड़ा rootMargin मान, जैसे 200px, उपयोगकर्ता के वास्तव में नीचे पहुँचने से पहले लोडिंग शुरू कर देता है। इससे नए आइटम बिना किसी दिखाई देने वाली रुकावट के सहज रूप से दिखाई देते हैं।
new IntersectionObserver(onIntersect, {
rootMargin: '300px' // begin loading well before the end
});सुलभता संबंधी बातें
अनंत स्क्रॉल की वजह से कीबोर्ड और स्क्रीन-रीडर उपयोगकर्ता फँस सकते हैं और फ़ुटर छिप सकता है। वैकल्पिक व्यवस्था के रूप में मैन्युअल रूप से दबाया जाने वाला Load More बटन देने पर विचार करें और ARIA लाइव क्षेत्रों की मदद से नई सामग्री की विनम्रता से घोषणा करें।
पूरा प्रवाह
इंटरसेक्शन ऑब्ज़र्वर के साथ अनंत स्क्रॉल का तरीका यह है: sentinel रखें, उसकी निगरानी करें, दिखाई देने पर डेटा प्राप्त करके जोड़ें, दोहरे लोड से बचाव करें और डेटा समाप्त होने पर डिस्कनेक्ट कर दें। स्क्रॉल की गणित की आवश्यकता नहीं होती।
त्वरित जाँच
अनंत स्क्रॉल के बारे में अपनी समझ जाँचें।
पुनरावलोकन
आपने अनंत स्क्रॉल बनाया:
- सूची के बाद एक sentinel तत्व रखें।
- इंटरसेक्शन ऑब्ज़र्वर से उसकी निगरानी करें।
- इंटरसेक्शन पर अगला page प्राप्त करके जोड़ें।
- दोहराए गए fetch से बचने के लिए
loadingफ़्लैग का उपयोग करें। - डेटा समाप्त होने पर डिस्कनेक्ट कर दें।
अब स्क्रॉल से सक्रिय होने वाले ऐनिमेशन सीखेंगे।
एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “अनंत स्क्रॉलिंग” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “अनंत स्क्रॉलिंग” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“अनंत स्क्रॉलिंग” में मैं क्या सीखूँगा?
उपयोगकर्ता के स्क्रॉल करने पर अधिक सामग्री लोड कीजिए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“अनंत स्क्रॉलिंग” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।