Uendelig rulling
Last inn mer innhold etter hvert som brukeren ruller.
Uendelig rulling er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva er uendelig rulling?
Uendelig rulling laster automatisk inn mer innhold når brukeren nærmer seg bunnen av en liste, i stedet for å kreve et klikk på «Neste side». Sosiale strømmer og søkeresultater bruker ofte denne teknikken.
Sentinel-mønsteret
Den ryddigste teknikken bruker et sentinel: et tomt element som plasseres på slutten av listen. Når sentinel-elementet ruller inn i visningen, henter og legger De til neste bolk.
// Markup pattern:
// <ul id="feed"> ...items... </ul>
// <div id="sentinel"></div> <!-- trigger element -->Observere sentinel-elementet
La en Intersection Observer følge med på sentinel-elementet. Siden det ligger etter det siste elementet, betyr synligheten at brukeren har nådd slutten.
const sentinel = document.getElementById('sentinel');
const observer = new IntersectionObserver(onIntersect, {
rootMargin: '200px' // load a bit early
});
observer.observe(sentinel);Utløse en lasting
Kontroller isIntersecting i callbacken. Når verdien er sann, laster De inn neste side med data.
function onIntersect(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreItems();
}
});
}Holde oversikt over siden
Bruk en sideteller slik at hver lasting henter neste del. Øk telleren etter en vellykket henting.
let page = 1;
async function loadMoreItems() {
const items = await fetchPage(page);
appendItems(items);
page++;
}Hindre doble lastinger
Callbacken kan utløses flere ganger. Bruk et loading-flagg slik at en ny henting ikke starter mens en annen fortsatt pågår.
let loading = false;
async function loadMoreItems() {
if (loading) return;
loading = true;
const items = await fetchPage(page);
appendItems(items);
page++;
loading = false;
}Legge til nye elementer
Legg de hentede elementene til før sentinel-elementet, slik at det blir værende nederst i listen som vokser og kan utløse neste lasting.
function appendItems(items) {
const feed = document.getElementById('feed');
items.forEach(item => {
const li = document.createElement('li');
li.textContent = item.title;
feed.appendChild(li);
});
}Stoppe ved slutten
Når serveren ikke returnerer mer data, kobler De fra observatøren slik at den slutter å forsøke å laste inn mer. Dette hindrer endeløse tomme forespørsler.
const items = await fetchPage(page);
if (items.length === 0) {
observer.disconnect(); // no more data
return;
}Hvorfor rootMargin hjelper
En romslig rootMargin, for eksempel 200px, starter lastingen før brukeren faktisk når bunnen. Da vises nye elementer sømløst uten en synlig pause.
new IntersectionObserver(onIntersect, {
rootMargin: '300px' // begin loading well before the end
});Tilgjengelighetsmerknader
Uendelig rulling kan fange tastatur- og skjermleserbrukere og skjule bunnteksten. Vurder en manuell «Last inn flere»-knapp som reserve, og kunngjør nytt innhold på en høflig måte med ARIA-live-regioner.
Hele flyten
Uendelig rulling med Intersection Observer: plasser et sentinel-element, observer det, last inn og legg til data når det vises, hindre doble lastinger, og koble fra når det ikke er mer data. Ingen beregninger basert på rulling er nødvendig.
Rask kontroll
Test forståelsen Deres av uendelig rulling.
Oppsummering
De har bygget uendelig rulling:
- Plasser et sentinel-element etter listen.
- Observer det med en Intersection Observer.
- Ved skjæring henter og legger De til neste side.
- Bruk et
loading-flagg for å unngå doble hentinger. - Koble fra når det ikke er mer data.
Deretter skal vi se på animasjoner som utløses ved rulling.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Uendelig rulling» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Uendelig rulling», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Uendelig rulling»?
Last inn mer innhold etter hvert som brukeren ruller. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Uendelig rulling»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.