Ismerje meg a végtelen görgetés alapelveit és gyakorlati lehetőségeit.

A végtelen görgetés lehetővé teszi a tartalom folyamatos betöltését, miközben a felhasználók lefelé haladnak az oldalon, ellentétben a hagyományos oldalszámozás kattintással betölthető módszerével. Ez a funkció simább élményt kínál, különösen mobileszközökön.

Fedezze fel, hogyan állíthat be végtelen görgetést egyszerű HTML, CSS és JavaScript használatával.

A frontend beállítása

Kezdje egy alapvető HTML-struktúrával a tartalom megjelenítéséhez. Íme egy példa:

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>

Ez az oldal helyőrző képeket tartalmaz, és két forrásra hivatkozik: egy CSS-fájlra és egy JavaScript-fájlra.

CSS-stílus görgethető tartalomhoz

A helyőrző képek rácsban való megjelenítéséhez adja hozzá a következő CSS-t az Önhöz stílus.css fájl:

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

Jelenleg az oldaladnak így kell kinéznie:

Alapvető megvalósítás JS-sel

Szerkesztés script.js. A végtelen görgetés megvalósításához észlelnie kell, ha a felhasználó görgetett a tartalomtároló vagy az oldal aljához.

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

Ezután hozzon létre egy függvényt további helyőrző adatok lekéréséhez.

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

Ehhez a projekthez az API-t használhatja fakestoreapi.

Ha meg szeretné győződni arról, hogy a rendszer lekéri-e az adatokat görgetéskor, vessen egy pillantást a konzolra:

Észre fogja venni, hogy a rendszer többször is lekéri az adatokat görgetés közben, ami ronthatja az eszköz teljesítményét. Ennek elkerülése érdekében hozzon létre egy kezdeti adatlekérési állapotot:

let isFetching = false;

Ezután módosítsa a lekérési funkciót úgy, hogy csak az előző lekérés befejezése után kérje le az adatokat.

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

Az új tartalom megjelenítése

Ha új tartalmat szeretne megjeleníteni, amikor a felhasználó lefelé görget az oldalon, hozzon létre egy függvényt, amely hozzáfűzi a képeket a szülőtárolóhoz.

Először válassza ki a szülő elemet:

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

Ezután hozzon létre egy függvényt a tartalom hozzáfűzéséhez.

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

Végül módosítsa a lekérési függvényt, és adja át a lekért adatokat az append függvénynek.

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

És ezzel a végtelen tekercsed most működik.

A felhasználói élmény javítása érdekében megjeleníthet egy betöltésjelzőt az új tartalom lekérésekor. Kezdje a HTML hozzáadásával.

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

Ezután válassza ki a betöltő elemet.

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

Végül hozzon létre két funkciót a betöltésjelző láthatóságának váltásához.

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

Ezután adja hozzá őket a lekérési függvényhez.

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

Ami ad:

Néhány követendő bevált gyakorlat:

  • Ne hozzon le túl sok elemet egyszerre. Ez túlterhelheti a böngészőt és ronthatja a teljesítményt.
  • Ahelyett, hogy egy görgetési esemény észlelésekor azonnal lekérné a tartalmat, debounce függvényt használjunk hogy kissé késleltesse a letöltést. Ez lehet megakadályozza a túlzott hálózati kéréseket.
  • Nem minden felhasználó részesíti előnyben a végtelen görgetést. Felajánljon egy lehetőséget lapozási összetevőt használjon ha szükséges.
  • Ha nincs több betöltendő tartalom, értesítse a felhasználót ahelyett, hogy folyamatosan újabb tartalmat próbálna lekérni.

A zökkenőmentes tartalombetöltés elsajátítása

A végtelen görgetés lehetővé teszi a felhasználók számára a tartalom zökkenőmentes böngészését, és ez nagyszerű a mobileszközöket használók számára. Ha használja a cikk tippjeit és fontos tanácsait, hozzáadhatja ezt a funkciót webhelyéhez.

Ne felejtse el gondolni arra, hogy a felhasználók hogyan érzik magukat, amikor használják webhelyét. Mutasson olyan dolgokat, mint az előrehaladás jelei és a hibajegyzetek, hogy megbizonyosodjon arról, hogy a felhasználó tudja, mi történik.