Нескінченне прокручування дозволяє безперервно завантажувати вміст, коли користувачі пересуваються сторінкою вниз, на відміну від традиційного методу завантаження клацанням за сторінки. Ця функція може запропонувати більш плавну роботу, особливо на мобільних пристроях.
Дізнайтеся, як налаштувати нескінченне прокручування за допомогою звичайного HTML, CSS і JavaScript.
Налаштування інтерфейсу
Почніть із базової структури HTML для відображення вмісту. Ось приклад:
<!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>
Ця сторінка містить серію зображень-заповнювачів і посилається на два ресурси: файл CSS і файл JavaScript.
Стилі CSS для прокручуваного вмісту
Щоб відобразити зображення-заповнювачі в сітці, додайте такий CSS до свого файлу style.css:
* {
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%);
}
На даний момент ваша сторінка повинна виглядати так:
Основна реалізація за допомогою JS
Відредагуйте script.js. Щоб застосувати нескінченне прокручування, вам потрібно визначити, коли користувач прокручував ближче до нижньої частини контейнера вмісту або сторінки.
"use strict";window.addEventListener("scroll", () => {
if (
window.scrollY + window.innerHeight >=
document.documentElement.scrollHeight - 100
) {
fetchMoreContent();
}
});
Потім створіть функцію для отримання додаткових даних-заповнювачів.
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");
}
}
Для цього проекту ви можете використовувати API з fakestoreapi.
Щоб переконатися, що ваші дані витягуються під час прокручування, подивіться на консоль:
Ви помітите, що ваші дані завантажуються кілька разів під час прокручування, що може бути чинником, який погіршує продуктивність пристрою. Щоб запобігти цьому, створіть початковий стан отримання даних:
let isFetching = false;
Потім змініть свою функцію вибірки, щоб отримати дані лише після завершення попередньої вибірки.
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;
}
}
Відображення нового вмісту
Щоб відображати новий вміст, коли користувач прокручує сторінку вниз, створіть функцію, яка додає зображення до батьківського контейнера.
Спочатку виберіть батьківський елемент:
const productsList = document.querySelector(".products__list");
Потім створіть функцію для додавання вмісту.
function displayNewContent(data) {
data.forEach((item) => {
const imgElement = document.createElement("img");
imgElement.src = item.image;
imgElement.alt = item.title;
productsList.appendChild(imgElement);
});
}
Нарешті, змініть свою функцію вибірки та передайте отримані дані функції додавання.
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;
}
}
І з цим ваш нескінченний сувій тепер працює.
Щоб покращити роботу користувача, ви можете відображати індикатор завантаження під час отримання нового вмісту. Почніть із додавання цього HTML.
<h1 class="loading-indicator">Loading...</h1>
Потім виберіть елемент завантаження.
const loadingIndicator = document.querySelector(".loading-indicator");
Нарешті, створіть дві функції для перемикання видимості індикатора завантаження.
function showLoadingIndicator() {
loadingIndicator.style.display = "block";
console.log("Loading...");
}function hideLoadingIndicator() {
loadingIndicator.style.display = "none";
console.log("Finished loading.");
}
Потім додайте їх до функції отримання.
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;
}
}
Що дає:
Ось кілька найкращих практик, яких слід дотримуватися:
- Не беріть занадто багато предметів одночасно. Це може перевантажити браузер і знизити продуктивність.
- Замість отримання вмісту одразу після виявлення події прокручування використовуйте функцію усунення дребезгу, щоб трохи затримати вибірку. Це може запобігти надлишку мережевих запитів.
- Не всі користувачі віддають перевагу нескінченній прокрутці. За бажанням запропонуйте можливість використовувати компонент розбиття на сторінки.
- Якщо більше немає вмісту для завантаження, повідомте користувача замість того, щоб постійно намагатися отримати додатковий вміст.
Освоєння безперебійного завантаження вмісту
Нескінченне прокручування дозволяє користувачам плавно переглядати вміст, і це чудово для людей, які користуються мобільними пристроями. Якщо ви скористаєтеся порадами та важливими порадами з цієї статті, ви можете додати цю функцію на свої веб-сайти.
Пам’ятайте про те, що відчувають користувачі, коли вони відвідують ваш сайт. Показуйте такі речі, як знаки прогресу та примітки про помилки, щоб переконатися, що користувач знає, що відбувається.