Aflați despre principiile și aspectele practice ale scroll infinit.
Derularea infinită permite conținutului să se încarce continuu pe măsură ce utilizatorii se deplasează în jos pe pagină, spre deosebire de metoda de paginare tradițională prin clic pentru încărcare. Această caracteristică poate oferi o experiență mai lină, în special pe dispozitivele mobile.
Descoperiți cum să configurați derularea infinită folosind HTML simplu, CSS și JavaScript.
Configurarea front-end-ului
Începeți cu o structură HTML de bază pentru a vă afișa conținutul. Iată un exemplu:
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>
Această pagină conține o serie de imagini substituenți și face referire la două resurse: un fișier CSS și un fișier JavaScript.
Stilul CSS pentru conținut care poate fi derulat
Pentru a afișa imaginile substituent într-o grilă, adăugați următorul CSS la dvs stil.css fişier:
* {
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%);
}
În acest moment, pagina dvs. ar trebui să arate astfel:
Implementarea de bază cu JS
Editați | × script.js. Pentru a implementa derularea infinită, trebuie să detectați când utilizatorul a derulat în partea de jos a containerului de conținut sau a paginii.
"use strict";window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
// User is near the bottom, fetch more content
fetchMoreContent();
}
});
Apoi, creați o funcție pentru a prelua mai multe date de substituent.
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");
}
}
Pentru acest proiect, puteți utiliza API-ul de la fakestoreapi.
Pentru a confirma că datele dvs. sunt preluate prin defilare, aruncați o privire pe consolă:
Veți observa că datele dvs. sunt preluate de mai multe ori pe defilare, ceea ce poate fi un factor care dăunează performanței dispozitivului. Pentru a preveni acest lucru, creați o stare inițială de preluare a datelor:
let isFetching = false;Apoi, modificați funcția de preluare pentru a prelua date numai după ce s-a terminat o preluare anterioară.
asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetchingisFetching = 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
}
}
Afișarea conținutului nou
Pentru a afișa conținut nou atunci când utilizatorul derulează în jos pe pagină, creați o funcție care atașează imaginile la containerul părinte.
Mai întâi, selectați elementul părinte:
const productsList = document.querySelector(".products__list");Apoi, creați o funcție pentru a adăuga conținut.
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
});
}În cele din urmă, modificați funcția de preluare și transmiteți datele preluate funcției de adăugare.
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;
}
}
Și cu asta, derularea ta infinită funcționează acum.
Pentru a îmbunătăți experiența utilizatorului, puteți afișa un indicator de încărcare atunci când preluați conținut nou. Începeți prin a adăuga acest HTML.
<h1class="loading-indicator">Loading...h1>Apoi selectați elementul de încărcare.
const loadingIndicator = document.querySelector(".loading-indicator");În cele din urmă, creați două funcții pentru a comuta vizibilitatea indicatorului de încărcare.
functionshowLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}functionhideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Apoi, adăugați-le la funcția de preluare.
asyncfunctionfetchMoreContent() {
if (isFetching) return; // Exit if already fetchingisFetching = true;
showLoadingIndicator(); // Show loadertry {
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;
}
}
Care dă:
Unele dintre cele mai bune practici de urmat includ:
- Nu aduceți prea multe articole simultan. Acest lucru poate copleși browserul și poate degrada performanța.
- În loc să preluați conținut imediat după detectarea unui eveniment de defilare, utilizați o funcție de debounce pentru a întârzia ușor preluarea. Acesta poate preveniți solicitările excesive de rețea.
- Nu toți utilizatorii preferă derularea infinită. Oferiți o opțiune pentru utilizați o componentă de paginare dacă se dorește.
- Dacă nu mai există conținut de încărcat, informați utilizatorul în loc să încercați continuu să preia mai mult conținut.
Stăpânirea încărcării fără întreruperi a conținutului
Derularea infinită permite utilizatorilor să răsfoiască fără probleme conținutul și este grozav pentru persoanele care folosesc dispozitive mobile. Dacă utilizați sfaturile și sfaturile importante din acest articol, puteți adăuga această funcție pe site-urile dvs. web.
Nu uitați să vă gândiți la felul în care se simt utilizatorii când vă folosesc site-ul. Afișați lucruri precum semne de progres și note de eroare pentru a vă asigura că utilizatorul știe ce se întâmplă.
