Как определить, когда элемент входит или выходит из области просмотра с помощью ванильного JavaScript

Это происходит асинхронно, и это гораздо эффективнее, чем использование слушателя событий прокрутки. Сегодня и завтра мы рассмотрим, как работает API. Сегодня мы рассмотрим основы. Завтра мы перейдём к рассмотрению некоторых тонкостей.

Давайте разбираться.

Новый конструктор IntersectionObserver()

Для создания нового объекта IntersectionObserver можно использовать конструктор new IntersectionObserver().

Передать в качестве аргумента функцию обратного вызова. Обратный вызов принимает два аргумента: entries — массив элементов, вызвавших запуск функции обратного вызова, и, опционально, сам observer.

// Создание нового объекта IntersectionObserver
let observer = new IntersectionObserver(function (entries, observer) {
  console.log('Произошло пересечение!');
  console.log(entries);
});

После создания наблюдателя используйте метод IntersectionObserver.prototype.observe() для наблюдения за элементом. Всякий раз, когда наблюдаемый элемент входит или выходит из области просмотра, будет выполняться функция обратного вызова.

// Элемент для наблюдения
let app = document.querySelector('#app');

// Наблюдение за элементом #app
observer.observe(app);

Вот демонстрация

Массив элементов

В функции обратного вызова для объекта IntersectionObserver параметр entries представляет собой массив объектов IntersectionObserverEntry, по одному на каждый элемент, вызвавший запуск функции обратного вызова.

Часто он будет содержать только один элемент, даже если наблюдается несколько элементов, но это всегда массив.

Здесь мы наблюдаем за несколькими элементами заголовка. Если один из них выходит из области просмотра, а другой входит в неё одновременно, то массив entries будет содержать объекты IntersectionObserverEntry для обоих. Но обычно в момент срабатывания функции обратного вызова в область просмотра входит или выходит только один наблюдаемый элемент.

Перебор каждой записи можно выполнить с помощью цикла for...of или любого из методов объекта Array, например Array.prototype.forEach().

// Создание нового объекта IntersectionObserver
let observer = new IntersectionObserver(function (entries, observer) {
  for (let entry of entries) {
    console.log(entry);
  }
});

// Получение элементов заголовков
let headings = document.querySelectorAll('h2');

// Наблюдение за каждым заголовком
for (let heading of headings) {
  observer.observe(heading);
}

Каждый объект IntersectionObserverEntry включает в себя несколько свойств.

Свойство IntersectionObserverEntry.prototype.isIntersecting имеет значение true, если элемент находится в области просмотра, и false, если нет. Свойство IntersectionObserverEntry.prototype.target — это сам элемент.

// Создание нового объекта IntersectionObserver
let observer = new IntersectionObserver(function (entries, observer) {
  for (let entry of entries) {
    console.log('элемент', entry.target);
    console.log('пересекается', entry.isIntersecting);
  }
});

Вот демонстрация

Завтра мы рассмотрим другие свойства экземпляра IntersectionObserverEntry.