Oändlig skrollning
Ladda mer innehåll när användaren skrollar.
Oändlig skrollning är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad är oändlig scrollning?
Oändlig scrollning laddar automatiskt mer innehåll när användaren närmar sig slutet av en lista, i stället för att kräva ett klick på Nästa sida. Sociala flöden och sökresultat använder ofta detta.
Sentinel-mönstret
Den enklaste tekniken använder en sentinel: ett tomt element som placeras sist i listan. När sentinel-elementet blir synligt hämtar och lägger du till nästa omgång.
// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div> <!-- trigger element -->Observera sentinel-elementet
Ange sentinel-elementet som mål för en Intersection Observer. Eftersom det ligger efter det sista objektet betyder dess synlighet att användaren har nått slutet.
const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);Utlös en laddning
Kontrollera isIntersecting i callbacken. När värdet är sant laddar du nästa datasida.
function onIntersect(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreItems();
}
});
}Håll reda på sidan
Behåll en sidräknare så att varje laddning hämtar nästa delmängd. Öka räknaren efter en lyckad hämtning.
let page = 1;
async function loadMoreItems() {
const items = await fetchPage(page);
appendItems(items);
page++;
}Förhindra dubbla laddningar
Callbacken kan anropas upprepade gånger. Använd en flagga med namnet loading så att en ny hämtning inte startar medan en annan redan pågår.
let loading = false;
async function loadMoreItems() {
if (loading) return;
loading = true;
const items = await fetchPage(page);
appendItems(items);
page++;
loading = false;
}Lägg till nya objekt
Lägg till de hämtade objekten före sentinel-elementet så att det fortsätter att ligga längst ner i den växande listan och kan utlösa nästa laddning.
function appendItems(items) {
const feed = document.getElementById('feed');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item.title;
feed.appendChild(li);
});
}Stoppa vid slutet
När servern inte returnerar mer data kopplar du från observeraren så att den slutar försöka ladda. Det förhindrar ändlösa tomma förfrågningar.
const items = await fetchPage(page);
if (items.length === 0) {
observer.disconnect(); // no more data
return;
}Därför hjälper rootMargin
En generös rootMargin, till exempel 200px, börjar ladda innan användaren faktiskt når slutet. Då visas nya objekt sömlöst utan en synlig paus.
new IntersectionObserver(onIntersect, {
rootMargin: '300px' // begin loading well before the end
});Tillgänglighetsaspekter
Oändlig scrollning kan göra att tangentbords- och skärmläsaranvändare fastnar och dölja sidfoten. Överväg en manuell knapp för Läs in mer som reserv och meddela nya innehållsobjekt på ett diskret sätt med ARIA live-regioner.
Det fullständiga flödet
Oändlig scrollning med Intersection Observer: placera ett sentinel-element, observera det, ladda och lägg till data när det blir synligt, förhindra dubbla laddningar och koppla från observeraren när datan tar slut. Ingen beräkning av scrollpositioner krävs.
Snabbtest
Testa dina kunskaper om oändlig scrollning.
Sammanfattning
Du har byggt oändlig scrollning:
- Placera ett sentinel-element efter listan.
- Observera det med en Intersection Observer.
- Vid skärning hämtar och lägger du till nästa sida.
- Använd en flagga med namnet
loadingför att undvika dubbla hämtningar. - Koppla från observeraren när all data är slut.
Härnäst: scrollutlösta animeringar.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Oändlig skrollning” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Oändlig skrollning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Oändlig skrollning”?
Ladda mer innehåll när användaren skrollar. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Oändlig skrollning”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.