Ссылка на статью в телеграм: https://t.me/froggyxyz_dev/4 Ссылка на статью в вк: https://vk.com/@froggyxyz_dev-intersection-observer

За несколько лет работы в IT, мне приходилось работать с множеством данных, которые необходимо было пагинировать, поскольку выводить все эти данные разом, особенно если их сотни и тысячи, смерти подобно.

Но обычно пагинация выглядела как переключалка с номерами страниц и стрелочками. Недавно же мне поставили задачу реализовать автоматическую подгрузку следующих данных при скролле до конца (пагинация при скролле).

Я сразу задумался о том, как бы это реализовать. Первое, что приходит в голову - следить за скроллом, навесить обработчик события, считать сколько осталось до конца. Это слишком напряжно и более ресурсозатратно, чем вариант, который мне пришел в голову.

В JavaScript есть Intersection Observer - API, которая дает возможность отследить пересечение элемента с его родителем или областью видимости. Область видимости - то, что нам и нужно в этом случае.

Переходим от слов к делу.

<div class="data-list"> <!-- наши данные --> </div> <div ref="observer" />

Допустим, у нас есть div.data-list, в котором мы рендерим все наши данные. Добавим после него еще один div, но пустой, а для удобства доступа к нему, навесим какой-нибудь ref (Пример в рамках Vue 2 Options API).

Задумка заключается в том, что когда пользователь долистает до нашего пустого div.ref="observer", мы будем подгружать новые данные.

Напишем функцию intersect, которая будет срабатывать, когда пользователь достиг целевого элемента:

intersect(entries) { entries.forEach(entry => { if (entry.isIntersecting) { this.loadItems(); // запрос на подгрузку данных } }); },

Далее нам нужно инициализировать IntersectionObserver, создадим для этого отдельную функцию:

initializeIntersectionObserver() { const options = { root: null, // Для того, чтобы следить за областью видимости rootMargin: '0px', threshold: 1.0, // чтобы intersect() сработала, когда элемент полностью в области видимости };

this.observer = new IntersectionObserver(this.intersect, options); if (this.$refs.observer) { this.observer.observe(this.$refs.observer); } }

А также создадим функцию, которая будет отключать IntersectionObserver, когда он нам больше не нужен:

destroyIntersectionObserver() { if (this.observer) { this.observer.disconnect(); } }

И просто вызываем наши функции initializeIntersectionObserver и destroyIntersectionObserver в подходящих хуках жизненного цикла:

mounted() { this.initializeIntersectionObserver(); }, beforeDestroy() { this.destroyIntersectionObserver(); }

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