Leer meer over de principes en praktische aspecten van oneindig scrollen.

Met oneindig scrollen wordt de inhoud continu geladen terwijl gebruikers naar beneden gaan op de pagina, in tegenstelling tot de click-to-load-methode van traditionele paginering. Deze functie kan een soepelere ervaring bieden, vooral op mobiele apparaten.

Ontdek hoe u oneindig scrollen kunt instellen met gewone HTML, CSS en JavaScript.

Het opzetten van de frontend

Begin met een eenvoudige HTML-structuur om uw inhoud weer te geven. Hier is een voorbeeld:

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>
<scriptsrc="script.js">script>
body>
html>

Deze pagina bevat een reeks tijdelijke afbeeldingen en verwijst naar twee bronnen: een CSS-bestand en een JavaScript-bestand.

CSS-stijl voor scrollbare inhoud

Om de tijdelijke aanduiding-afbeeldingen in een raster weer te geven, voegt u de volgende CSS toe aan uw stijl.css bestand:

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

Op dit moment zou uw pagina er als volgt uit moeten zien:

Kernimplementatie met JS

Bewerking script.js. Om oneindig scrollen te implementeren, moet u detecteren wanneer de gebruiker onderaan de inhoudscontainer of pagina heeft gescrolld.

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

Maak vervolgens een functie om meer tijdelijke aanduiding-gegevens op te halen.

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

Voor dit project kunt u de API van gebruiken nepstoreapi.

Kijk eens naar de console om te bevestigen dat uw gegevens worden opgehaald tijdens het scrollen:

U zult merken dat uw gegevens meerdere keren worden opgehaald tijdens het scrollen, wat een factor kan zijn die de apparaatprestaties schaadt. Om dit te voorkomen, maakt u een initiële ophaalstatus van de gegevens:

let isFetching = false;

Wijzig vervolgens uw ophaalfunctie om alleen gegevens op te halen nadat een eerdere ophaalactie is voltooid.

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

De nieuwe inhoud weergeven

Om nieuwe inhoud weer te geven wanneer de gebruiker naar beneden scrollt op de pagina, maakt u een functie die de afbeeldingen aan de bovenliggende container toevoegt.

Selecteer eerst het bovenliggende element:

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

Maak vervolgens een functie om inhoud toe te voegen.

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

Wijzig ten slotte uw ophaalfunctie en geef de opgehaalde gegevens door aan de append-functie.

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

En daarmee werkt je oneindige scroll nu.

Om de gebruikerservaring te verbeteren, kunt u een laadindicator weergeven wanneer u nieuwe inhoud ophaalt. Begin met het toevoegen van deze HTML.

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

Selecteer vervolgens het laadelement.

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

Maak ten slotte twee functies om de zichtbaarheid van de laadindicator te wijzigen.

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

Voeg ze vervolgens toe aan de ophaalfunctie.

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

Wat geeft:

Enkele best practices die u moet volgen, zijn onder meer:

  • Haal niet te veel items tegelijk op. Dit kan de browser overweldigen en de prestaties verslechteren.
  • In plaats van inhoud onmiddellijk op te halen bij het detecteren van een scrollgebeurtenis, gebruik een debounce-functie om het ophalen enigszins uit te stellen. Dit kan voorkomen dat er buitensporige netwerkverzoeken worden gedaan.
  • Niet alle gebruikers geven de voorkeur aan oneindig scrollen. Bied een optie aan gebruik een pagineringscomponent indien gewenst.
  • Als er geen inhoud meer is om te laden, informeer dan de gebruiker in plaats van voortdurend te proberen meer inhoud op te halen.

Beheers het naadloos laden van inhoud

Met oneindig scrollen kunnen gebruikers soepel door de inhoud bladeren, en dit is geweldig voor mensen die mobiele apparaten gebruiken. Als u de tips en belangrijke adviezen uit dit artikel gebruikt, kunt u deze functie aan uw websites toevoegen.

Vergeet niet na te denken over hoe de gebruikers zich voelen wanneer ze uw site gebruiken. Toon zaken als voortgangssignalen en foutnotities om ervoor te zorgen dat de gebruiker weet wat er gebeurt.