Нескінченна прокрутка дозволяє автоматично підвантажувати контент під час гортання сторінки, створюючи безперервний потік інформації. Це відрізняється від традиційного способу, коли потрібно натискати кнопки “Далі” або “Сторінка 2”. Такий підхід забезпечує більш зручну навігацію, особливо на мобільних пристроях.
Розглянемо, як реалізувати нескінченну прокрутку, використовуючи лише HTML, CSS та JavaScript.
Створення інтерфейсу
Спочатку створимо базову HTML-структуру для виведення контенту. Ось приклад:
Ця сторінка має декілька зображень-заповнювачів і посилання на два файли: CSS для стилів і JavaScript для логіки.
Стилізація CSS для прокручуваного контенту
Щоб відобразити заповнювачі зображень у сітці, додайте наступні CSS-правила до вашого файлу style.css:
На даному етапі ваша сторінка повинна виглядати приблизно так:
Основна реалізація за допомогою JavaScript
Відкрийте файл script.js. Для створення ефекту нескінченної прокрутки, нам потрібно визначити момент, коли користувач докрутив сторінку майже до самого низу.
Далі, створимо функцію для отримання додаткових даних (заповнювачів).
У цьому прикладі ми використовуємо API з fakestoreapi.
Щоб перевірити, чи правильно завантажуються дані при прокручуванні, погляньте на консоль розробника:
Ви можете помітити, що дані підвантажуються декілька разів під час прокрутки, що може негативно вплинути на продуктивність. Щоб уникнути цього, введемо початковий стан для запиту даних:
Потім модифікуємо функцію запиту, щоб вона виконувалася лише після завершення попереднього запиту.
Відображення нового контенту
Для відображення нового контенту під час прокрутки, створимо функцію, яка додаватиме зображення в контейнер.
Спочатку виберемо батьківський елемент:
Далі створимо функцію для додавання контенту:
Нарешті, змінимо функцію запиту та передамо отримані дані функції відображення:
Отже, нескінченна прокрутка має вже працювати.
Щоб поліпшити досвід користувача, можна відображати індикатор завантаження під час запиту нового контенту. Спершу додамо цей HTML-код:
Далі, виберемо елемент індикатора завантаження:
Нарешті, створимо дві функції для перемикання видимості індикатора завантаження:
Додамо ці функції до функції запиту:
Таким чином, ми отримаємо:
Ось декілька корисних порад:
- Не завантажуйте занадто багато об’єктів одночасно. Це може перевантажити браузер і знизити швидкість роботи.
- Замість того, щоб запитувати контент одразу після виявлення події прокрутки, скористайтеся функцією “debounce” для невеликої затримки. Це допоможе уникнути надмірної кількості мережевих запитів.
- Не всі користувачі віддають перевагу нескінченній прокрутці. За можливості, надайте можливість використовувати пагінацію.
- Якщо контент закінчився, повідомте про це користувача, замість постійних спроб завантажити ще.
Ефективне завантаження контенту
Нескінченна прокрутка дозволяє користувачам переглядати вміст без зайвих дій, і це особливо зручно для мобільних пристроїв. За допомогою порад і рекомендацій з цієї статті, ви зможете додати цю функцію до своїх веб-сайтів.
Не забувайте про зручність користувачів. Індикатори прогресу та повідомлення про помилки допоможуть їм розуміти, що відбувається на сторінці.