Бесконечная прокрутка на React
Бесконечная прокрутка (infinite scroll) — это технологический приём, который подгружает новый контент на страницу когда пользователь прокручивает страницу вниз.
Попробуем реализовать её при использовании библиотеки React и Intersection Observer API.
Подготовка
Создадим проект с такой структурой:
Посты будем загружать через API JSONPlaceholder. При get-запросе по адресу https://jsonplaceholder.typicode.com/posts с параметрами limit и page можно получить порцию объектов-постов (не больше 100 штук):
Визуально у меня это выглядит примерно так:
Получение ссылки на последний загруженный элемент
Для реализации бесконечной прокрутки удобнее всего привязываться к последнему загруженному элементу — и, когда он попадет в зону видимости, подгружать следующую порцию данных.
Для того, чтобы можно было получить ссылку на дочерний компонент, нужно обернуть его в React.forwardRef :
Затем в родительском элементе запомним эту ссылку:
Обратите внимание, что ref мы пишем только в последнем компоненте массива.
Зарегистрировать наблюдателя на последний загруженный элемент
Intersection Observer API позволяет указать функцию, которая будет вызвана всякий раз при попадании элемента в область видимости пользователем (на экран).
Для того, чтобы этот объект сохранялся независимо от рендера компонента, воспользуемся свойством хука useRef.
actionInSight — callback-функция, которая вызывается при попадании элемента в область видимости. В неё передается массив объектов наблюдения. Объект у нас один, так что сразу обращаемся к первому (нулевому) элементу.
Свойство isIntersecting принимает значение true когда интересующий нас элемент попадает на экран.
Условие && posts.page <= totalPages не даст нам делать запросы, когда количество постов достигнет максимума. Это условие можно заменить на то, которое будет подходить к вашей ситуации.
Если обработчик уже был ранее установлен, отключаем, чтобы создать заново.
Создаём объект-наблюдатель и передаём в него функцию для вызова.
Если последний элемент существует, устанавливаем его как наблюдаемый элемент.
Установку объекта-наблюдателя оборачиваем в useEffect , чтобы при изменении последнего элемента вешать на него новый объект-наблюдатель (и отключить старые).
Реализация бесконечной прокрутки на JavaScript
Здравствуйте! В данной статье речь пойдет о том, как реализовать бесконечную прокрутку контента сайта, аналогично тому, как это реализовано в таких социальных сетях как ВКонтакте или Facebook. Зачем нужен бесконечная скроллинг на сайте я уже говорил в прошлой статье, поэтому в данной статье сосредоточусь по большей части на технической стороне вопроса.
Кратко о бесконечном скроллинге
Так, например, Facebook загружает новые статьи по мере того как проматываете страницу вниз. Это приводит к более быстрой загрузке всего сайта, так как пропадает необходимость загрузки всего контента сразу. И для достижения подобного, Facebook использует технику, называемую бесконечным скроллингом.
Вкратце, под бесконечным скроллингом понимают бесконечные страницы контента. Когда пользователь достигает конца документа, т.е. заканчивает просмотр или чтение статьи, это событие регистрируется и новая статья, с помощью Ajax, асинхронно загружается и затем отображается. Создается впечатление, что страница загружается бесконечно.
Реализация
Код, представленный далее, проверяет, достиг ли пользователь конца элемента при скроллинге и, если, да, то загружает новый контент:
var block = document.getElementById('infinite-scroll');
var counter = 1;
var contentHeight = block.offsetHeight; // 1) высота блока контента вместе с границами
var yOffset = window.pageYOffset; // 2) текущее положение скролбара
var window_height = window.innerHeight; // 3) высота внутренней области окна документа
var y = yOffset + window_height;
// если пользователь достиг конца
if(y >= contentHeight)
<
//загружаем новое содержимое в элемент
block.innerHTML = block.innerHTML + «<div>Случайный текст или еще, что то</div>»;
>
>);
По умолчанию, Facebook и Вконтакте всегда отображает некоторое количество постов, при первой загрузке страницы. А по мере того, как пользователь прокручивает страницу, внизу отображаются другие сообщения.
В приведенном выше примере кода мы добавляем некоторый демонстрационный текст в область содержимого, когда пользователь заканчивает чтение, т.е. достигает конца элемента #infinite-scroll. Здесь мы напрямую добавляем случайный текст, но на реальном сайте вы скорее всего будете получать новые данные, используя AJAX.
Таким образом, бесконечная прокрутка представляет собой интересный способ организации представления контента сайта.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
How to do an infinite scroll in plain Javascript
I want to avoid using jQuery or another library for the sake of keeping my code minimal, I need very little in the way of features, I just want to append to a list when the user scrolls to the bottom. How would I do this in plain Javascript?
6 Answers 6
Basicaly you just need to hook the event scroll, check if the user scrolled down enough and add some content if so:
For achieving this behaviour you don’t need jQuery or a jQuery plugin. You can use only CSS or JavaScript (if you want to cover all browsers).
But don’t use onScroll : you can do all of this with just vanilla JS and the Intersection Observer API.
All you need to do is place elements and listen for when they become available in the screen. The Intersection Observer API is very customisable to fit all your needs.
In summary: you accomplish that with a few JavaScript & HTML lines and it’s much more performant than listening for scroll events in the browser.
Как пролистать бесконечную прокрутку до конца сразу
Создайте бесконечную страницу. Когда посетитель прокручивает её до конца, она автоматически добавляет текущие время и дату в текст (чтобы посетитель мог прокрутить ещё).
Пожалуйста, обратите внимание на две важные особенности прокрутки:
- Прокрутка «эластична». Можно прокрутить немного дальше начала или конца документа на некоторых браузерах/устройствах (после появляется пустое место, а затем документ автоматически «отскакивает» к нормальному состоянию).
- Прокрутка неточна. Если прокрутить страницу до конца, можно оказаться в 0-50px от реальной нижней границы документа.
Таким образом, «прокрутка до конца» должна означать, что посетитель находится на расстоянии не более 100px от конца документа.
P.S. В реальной жизни мы можем захотеть показать «больше сообщений» или «больше товаров».
Основа решения – функция, которая добавляет больше дат на страницу (или загружает больше материала в реальной жизни), пока мы находимся в конце этой страницы.
Мы можем вызвать её сразу же и добавить как обработчик для window.onscroll .
Самый важный вопрос: «Как обнаружить, что страница прокручена к самому низу?»