Μάθετε για τις αρχές και τις πρακτικές δυνατότητες του infinite scroll.

Η άπειρη κύλιση επιτρέπει τη συνεχή φόρτωση του περιεχομένου καθώς οι χρήστες μετακινούνται προς τα κάτω στη σελίδα, σε αντίθεση με τη μέθοδο κλικ για φόρτωση της παραδοσιακής σελιδοποίησης. Αυτή η λειτουργία μπορεί να προσφέρει μια πιο ομαλή εμπειρία, ειδικά σε κινητές συσκευές.

Ανακαλύψτε πώς να ρυθμίσετε την άπειρη κύλιση χρησιμοποιώντας απλό HTML, CSS και JavaScript.

Ρύθμιση του Frontend

Ξεκινήστε με μια βασική δομή HTML για να εμφανίσετε το περιεχόμενό σας. Εδώ είναι ένα παράδειγμα:

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>

Αυτή η σελίδα περιέχει μια σειρά εικόνων κράτησης θέσης και παραπέμπει σε δύο πόρους: ένα αρχείο CSS και ένα αρχείο JavaScript.

Στυλ CSS για περιεχόμενο με δυνατότητα κύλισης

Για να εμφανίσετε τις εικόνες κράτησης θέσης σε ένα πλέγμα, προσθέστε το ακόλουθο CSS στο δικό σας στυλ.css αρχείο:

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

Προς το παρόν, η σελίδα σας θα πρέπει να μοιάζει με αυτό:

Βασική υλοποίηση με JS

Επεξεργασία script.js. Για να εφαρμόσετε άπειρη κύλιση, πρέπει να εντοπίσετε πότε ο χρήστης έχει κάνει κύλιση κοντά στο κάτω μέρος του κοντέινερ περιεχομένου ή της σελίδας.

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

Στη συνέχεια, δημιουργήστε μια συνάρτηση για τη λήψη περισσότερων δεδομένων κράτησης θέσης.

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

Για αυτό το έργο, μπορείτε να χρησιμοποιήσετε το API από fakestoreapi.

Για να επιβεβαιώσετε ότι τα δεδομένα σας λαμβάνονται με κύλιση, ρίξτε μια ματιά στην κονσόλα:

Θα παρατηρήσετε ότι τα δεδομένα σας λαμβάνονται πολλές φορές σε κύλιση, κάτι που μπορεί να είναι ένας παράγοντας που επηρεάζει την απόδοση της συσκευής. Για να το αποτρέψετε αυτό, δημιουργήστε μια αρχική κατάσταση ανάκτησης των δεδομένων:

let isFetching = false;

Στη συνέχεια, τροποποιήστε τη λειτουργία ανάκτησης ώστε να λαμβάνει δεδομένα μόνο μετά την ολοκλήρωση μιας προηγούμενης ανάκτησης.

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

Εμφάνιση του Νέου Περιεχομένου

Για να εμφανίσετε νέο περιεχόμενο όταν ο χρήστης κάνει κύλιση προς τα κάτω στη σελίδα, δημιουργήστε μια συνάρτηση που προσαρτά τις εικόνες στο γονικό κοντέινερ.

Αρχικά, επιλέξτε το γονικό στοιχείο:

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

Στη συνέχεια, δημιουργήστε μια συνάρτηση για την προσθήκη περιεχομένου.

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

Τέλος, τροποποιήστε τη συνάρτηση ανάκτησης και περάστε τα δεδομένα που ανακτήθηκαν στη συνάρτηση προσάρτησης.

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

Και με αυτό, η άπειρη κύλισή σας τώρα λειτουργεί.

Για να βελτιώσετε την εμπειρία χρήστη, μπορείτε να εμφανίσετε μια ένδειξη φόρτωσης κατά την ανάκτηση νέου περιεχομένου. Ξεκινήστε προσθέτοντας αυτό το HTML.

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

Στη συνέχεια, επιλέξτε το στοιχείο φόρτωσης.

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

Τέλος, δημιουργήστε δύο λειτουργίες για να αλλάξετε την ορατότητα της ένδειξης φόρτωσης.

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

Στη συνέχεια, προσθέστε τα στη λειτουργία ανάκτησης.

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

Που δίνει:

Μερικές βέλτιστες πρακτικές που πρέπει να ακολουθήσετε περιλαμβάνουν:

  • Μην μεταφέρετε πάρα πολλά αντικείμενα ταυτόχρονα. Αυτό μπορεί να κατακλύσει το πρόγραμμα περιήγησης και να υποβαθμίσει την απόδοση.
  • Αντί να λαμβάνετε περιεχόμενο αμέσως μόλις εντοπίσετε ένα συμβάν κύλισης, χρησιμοποιήστε μια συνάρτηση αναπήδησης για να καθυστερήσει ελαφρώς η προσκόμιση. Αυτό μπορεί αποτροπή υπερβολικών αιτημάτων δικτύου.
  • Δεν προτιμούν όλοι οι χρήστες την άπειρη κύλιση. Προσφέρετε μια επιλογή για χρησιμοποιήστε ένα στοιχείο σελιδοποίησης αν είναι επιθυμητό.
  • Εάν δεν υπάρχει άλλο περιεχόμενο για φόρτωση, ενημερώστε τον χρήστη αντί να προσπαθείτε συνεχώς να ανακτήσετε περισσότερο περιεχόμενο.

Mastering απρόσκοπτη φόρτωση περιεχομένου

Η άπειρη κύλιση επιτρέπει στους χρήστες να περιηγούνται ομαλά στο περιεχόμενο και είναι εξαιρετική για άτομα που χρησιμοποιούν κινητές συσκευές. Εάν χρησιμοποιείτε τις συμβουλές και τις σημαντικές συμβουλές από αυτό το άρθρο, μπορείτε να προσθέσετε αυτήν τη δυνατότητα στους ιστότοπούς σας.

Θυμηθείτε να σκεφτείτε πώς νιώθουν οι χρήστες όταν χρησιμοποιούν τον ιστότοπό σας. Εμφανίστε πράγματα όπως σημάδια προόδου και σημειώσεις σφαλμάτων για να βεβαιωθείτε ότι ο χρήστης γνωρίζει τι συμβαίνει.