Lär dig om principerna och praktiska funktionerna för oändlig rullning.

Oändlig rullning låter innehåll laddas kontinuerligt när användarna flyttar ner på sidan, till skillnad från den traditionella sidnumreringsmetoden klicka för att ladda. Den här funktionen kan erbjuda en smidigare upplevelse, särskilt på mobila enheter.

Upptäck hur du ställer in oändlig rullning med vanlig HTML, CSS och JavaScript.

Konfigurera frontend

Börja med en grundläggande HTML-struktur för att visa ditt innehåll. Här är ett exempel:

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" />







instagram viewer



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

Den här sidan innehåller en serie platshållarbilder och refererar till två resurser: en CSS-fil och en JavaScript-fil.

CSS-styling för rullningsbart innehåll

För att visa platshållarbilderna i ett rutnät, lägg till följande CSS till din style.css fil:

* {
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%);
}

För tillfället bör din sida se ut så här:

Kärnimplementering med JS

Redigera script.js. För att implementera oändlig rullning måste du upptäcka när användaren har rullat nära botten av innehållsbehållaren eller sidan.

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

Skapa sedan en funktion för att hämta mer platshållardata.

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");
 }
}

För detta projekt kan du använda API från fakestoreapi.

För att bekräfta att din data hämtas på scroll, ta en titt på konsolen:

Du kommer att märka att din data hämtas flera gånger när du rullar, vilket kan vara en faktor som skadar enhetens prestanda. För att förhindra detta, skapa ett initialt hämtningstillstånd för data:

let isFetching = false;

Ändra sedan din hämtningsfunktion för att bara hämta data efter att en tidigare hämtning har avslutats.

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
 }
}

Visar det nya innehållet

För att visa nytt innehåll när användaren rullar ner på sidan, skapa en funktion som lägger till bilderna i den överordnade behållaren.

Välj först det överordnade elementet:

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

Skapa sedan en funktion för att lägga till innehåll.

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
 });
}

Ändra slutligen din hämtningsfunktion och skicka den hämtade datan till funktionen tillägg.

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;
 }
}

Och med det fungerar nu din oändliga rullning.

För att förbättra användarupplevelsen kan du visa en laddningsindikator när du hämtar nytt innehåll. Börja med att lägga till denna HTML.

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

Välj sedan laddningselementet.

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

Skapa slutligen två funktioner för att växla synligheten för lastindikatorn.

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

Lägg sedan till dem i hämtningsfunktionen.

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;
 }
}

Vilket ger:

Några bästa metoder att följa är:

  • Hämta inte för många föremål samtidigt. Detta kan överväldiga webbläsaren och försämra prestandan.
  • Istället för att hämta innehåll direkt när en rullningshändelse detekteras, använd en debounce-funktion för att fördröja hämtningen något. Detta kan förhindra överdrivna nätverksförfrågningar.
  • Alla användare föredrar inte oändlig rullning. Erbjuda ett alternativ till använda en sideringskomponent om så önskas.
  • Om det inte finns mer innehåll att ladda, informera användaren istället för att kontinuerligt försöka hämta mer innehåll.

Bemästra sömlös innehållsladdning

Oändlig rullning låter användare bläddra i innehåll smidigt, och det är bra för personer som använder mobila enheter. Om du använder tipsen och viktiga råd från den här artikeln kan du lägga till den här funktionen på dina webbplatser.

Kom ihåg att tänka på hur användarna känner när de använder din sida. Visa saker som framstegstecken och felanteckningar för att se till att användaren vet vad som händer.