IntersectionObserver

Интерфейс IntersectionObserver в составе Intersection Observer API предоставляет возможность асинхронного наблюдения за изменением пересечения целевого элемента с вышестоящим элементом или с верхоуровневым viewport документа. Вышестоящий элемент или viewport считается корнем.

Когда IntersectionObserver создан, он настроен на отслеживание заданных соотношений видимости в корне. Конфигурация не может быть изменена после создания IntersectionObserver, поэтому такой объект-наблюдатель полезен только для наблюдения за определёнными изменениями в степени видимости; однако вы можете следить за несколькими целевыми элементами с одним и тем же наблюдателем.

Constructor

IntersectionObserver.IntersectionObserver() (en-US): Создаёт новый объект IntersectionObserver, который будет запускать специальную колбэк-функцию, когда обнаружит пересечение одного или нескольких пороговых значений видимостью целевого элемента.

Properties

IntersectionObserver.root (en-US) Только для чтения: Конкретный предок наблюдаемого целевого element. Если в конструктор не было передано значения или оно null, будет использован viewport документа.
IntersectionObserver.rootMargin (en-US) Только для чтения: Смещение прямоугольника (пер. "An offset rectangle"), применяемое к bounding box (en-US) корня при расчёте пересечений, эффективно сжимает или увеличивает корень для целей расчёта. Возвращаемое этим свойством значение может не совпадать со значением, указанным при вызове конструктора, поскольку оно может быть изменено в соответствии с внутренними требованиями. Каждое смещение может быть выражено в пикселях (px) или в процентах (%). Значение по умолчанию "0px 0px 0px 0px".
IntersectionObserver.thresholds (en-US) Только для чтения: Список порогов, отсортированный по возрастанию, где каждый порог представляет собой отношение площади пересечения к ограничивающей области наблюдаемой цели. Уведомления для цели генерируются, когда любое из пороговых значений пересекается для этой цели. Если в конструктор не было передано значения, используется 0.

Methods

IntersectionObserver.disconnect() (en-US): Отключает объект IntersectionObserver от наблюдения любой цели.
IntersectionObserver.observe() (en-US): Сообщает объекту IntersectionObserver целевой элемент для наблюдения.
IntersectionObserver.takeRecords() (en-US): Возвращает массив из объектов IntersectionObserverEntry (en-US) для всех наблюдаемых целей.
IntersectionObserver.unobserve() (en-US): Сообщает объекту IntersectionObserver прекратить наблюдение за конкретным целевым элементом.

Examples

var intersectionObserver = new IntersectionObserver(function(entries) {
  // Если intersectionRatio равен 0, цель вне зоны видимости
  // и нам не нужно ничего делать
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// начать наблюдение
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

Specifications

Specification	Status	Comment
Intersection Observer Определение 'IntersectionObserver' в этой спецификации.	Рабочий черновик

Browser compatibility

BCD tables only load in the browser