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

js

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
Intersection Observer
# intersection-observer-interface

Browser compatibility

BCD tables only load in the browser

See also