Intersection Observer API позволяет определять на «ванильном» js видимость элемента. Он запускает функцию обратного вызова, когда искомый элемент входит или выходит из области видимости (или за пределы другого элемента).
Этот способ намного эффективнее, чем применение события scroll совместно с методом Element.getBoundingClientRect(). В этой статье описаны основы использования такого подхода, а подробности некоторых его настроек рассматриваются в другой публикации об Intersection Observer API.
В примерах ниже наглядно демонстрируется, что на нативном js видимость элемента проверить ни чуть не сложнее, чем на jQuery. Это позволяет отказаться от использования этой библиотеки для решения такой незначительной задачи.
Проверяем на js видимость элемента
Для запуска потребуется создать новый конструктор IntersectionObserver() и передать в него функцию обратного вызова. Она принимает два аргумента: entries (массив прикрепленных элементов, который запускает callback-функцию) и сам observer («наблюдатель»).
// Создаем новый observer (наблюдатель)
let observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
// Выводим в консоль сам элемент
console.log(entry.target);
// Выводим в консоль true (если элемент виден) или false (если нет)
console.log(entry.isIntersecting);
});
});
// Задаем элемент для наблюдения
let el = document.querySelector('.element');
// Прикрепляем его к «наблюдателю»
observer.observe(el);Для прикрепления элемента, за которым требуется следить, к наблюдателю необходим метод IntersectionObserver.observe().
В примере ниже каждый раз, когда элемент с классом element входит или покидает область видимости, запускается функция обратного вызова. Если требуется просто проверить видимость элемента, а не целой коллекции, массив entries всегда будет содержать только один item. В нашем случае — это element.
Каждый элемент в массиве entries включает в себя несколько свойств. Свойство isIntersecting имеет значение true, если элемент находится в области видимости, и false, если это не так. Роль target в этом случае играет сам наблюдаемый элемент.
Отключение наблюдения за элементом
Прекратить работу observer можно с помощью метода IntersectionObserver.unobserve().
Давайте рассмотрим еще один пример, как проверить на нативном js видимость элемента. Допустим нам требуется создать «ленивую» загрузку текста в блок после того, как он войдет в зону видимости. Как только это произойдет, дальнейшее наблюдение за ним уже не потребуется, поэтому observer можно отключить.
Внутри callback-функции можно передать сам observer в качестве второго аргумента — obs. Если entry.isIntersecting равен true, произойдет добавление текста в элемент. Затем сработает метод obs.unobserve() для entry.target и снимет наблюдение за ним.
// Создаем новый observer (наблюдатель)
let observer = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
// Если элемент в зоне видимости, то ничего не происходит
if (!entry.isIntersecting) return;
// Отключаем «наблюдатель»
obs.unobserve(entry.target);
// Добавляем текст
entry.target.textContent = ` Элемент вошел в зону видимости.`;
});
});
// Задаем элемент для наблюдения
let el = document.querySelector('.element');
// Прикрепляем его к «наблюдателю»
observer.observe(el);В качестве альтернативного варианта есть возможность прекратить наблюдение за всеми элементами с помощью метода IntersectionObserver.disconnect().
// Отключаем наблюдение за всеми элементами observer.disconnect();
