Что такое бесконечная прокрутка?

Возможно, вы уже видели такие сайты, как интернет-магазины, где при прокрутке страницы вниз постоянно появляются товары. Еще один пример — бесконечный.horse, он может показаться простым, но это отличный пример для демонстрации функциональности «Бесконечные прокрутки». Заходя на сайт, вы видите лошадь, но прокручивая страницу вниз, вы понимаете, что ноги лошади продолжают расти бесконечно, и вы никогда не доберетесь до ног лошади.

Реализация бесконечной прокрутки

Данный функционал широко используется в современной разработке. Мы можем увидеть бесконечную прокрутку в действии в крупных социальных сетях, таких как Twitter, Facebook и особенно в Instagram, где контент никогда не заканчивается, когда мы прокручиваем страницу вниз.

В этой статье я продемонстрирую базовую реализацию этой функциональности. Однако этот подход не решает такие проблемы, как проблемы с длинными запросами, реализацией кэширования и другие решения, необходимые для производственных приложений. Тем не менее, это отправная точка для понимания того, как мы можем реализовать эту функцию.

Шаг 1. Решите, где добавить функцию бесконечной прокрутки

Сначала решите, где вы добавите функцию бесконечной прокрутки. Это будет список сообщений или изображений? Вам также нужно будет решить, откуда будут поступать данные. В этом примере мы будем использовать изображения из базового API, Random Fox API.

Шаг 2. Создайте HTML-файл.

Создайте HTML-файл и включите контейнер для случайных изображений лис.

Fox Images

Шаг 3. Создайте CSS-файл.

В этом примере мы сделаем таблицу стилей очень простой.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

Шаг 4. Создайте файл JavaScript.

Выберите контейнер и получите URL-адрес Random Fox API. Не забудьте связать файлы JavaScript и CSS в HTML.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i 




  
  
  Шаг 5. Добавьте событие прокрутки


Чтобы реализовать функцию бесконечной прокрутки, добавьте этот прослушиватель событий:


window.addEventListener('scroll', () => {
  if (window.scrollY   window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});




Если сумма ScrollY и InnerHeight больше или равна ScrollHeight, это означает, что мы достигли конца документа и, следовательно, необходимо загрузить больше изображений.


  
  
  Заключение


Теперь ваша страница должна работать с технологией бесконечной прокрутки. Вот вам задача: попробуйте переделать этот проект, используя другой API по вашему выбору, а также реализовать более сложный стиль для отображения ваших элементов. Удачи!