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.
Innehållsförteckning
Konfigurera frontend
Börja med en grundläggande HTML-struktur för att visa ditt innehåll. Här är ett exempel:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/style.css" />
</head>
<body>
<h1>Infinite Scroll Page</h1><div class="products__list">
<img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/><img src="https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg"
/>
</div><script src="https://wilku.top/how-to-implement-infinite-scroll-in-a-web-application/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, "Times New Roman", 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
) {
fetchMoreContent();
}
});
Skapa sedan en funktion för att hämta mer platshållardata.
async function fetchMoreContent() {
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3"); if (!response.ok) {
throw new Error("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.
async function fetchMoreContent() {
if (isFetching) return; isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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;
}
}
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.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement);
});
}
Ändra slutligen din hämtningsfunktion och skicka den hämtade datan till funktionen tillägg.
async function fetchMoreContent() {
if (isFetching) return; isFetching = true;
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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.
<h1 class="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.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Lägg sedan till dem i hämtningsfunktionen.
async function fetchMoreContent() {
if (isFetching) return; isFetching = true;
showLoadingIndicator();
try {
let response = await fetch("https://fakestoreapi.com/products?limit=3");
if (!response.ok) {
throw new Error("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();
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 efter att en rullningshändelse har upptäckts, använd en avstudsfunktion 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. Erbjud ett alternativ att 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.