IntersectionObserver

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2019.

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

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

Constructor

IntersectionObserver.IntersectionObserver()

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

Properties

IntersectionObserver.root Только для чтения

Конкретный предок наблюдаемого целевого element. Если в конструктор не было передано значения или оно null, будет использован viewport документа.

IntersectionObserver.rootMargin Только для чтения

Смещение прямоугольника (пер. "An offset rectangle"), применяемое к bounding box корня при расчёте пересечений, эффективно сжимает или увеличивает корень для целей расчёта. Возвращаемое этим свойством значение может не совпадать со значением, указанным при вызове конструктора, поскольку оно может быть изменено в соответствии с внутренними требованиями. Каждое смещение может быть выражено в пикселях (px) или в процентах (%). Значение по умолчанию "0px 0px 0px 0px".

IntersectionObserver.thresholds Только для чтения

Список порогов, отсортированный по возрастанию, где каждый порог представляет собой отношение площади пересечения к ограничивающей области наблюдаемой цели. Уведомления для цели генерируются, когда любое из пороговых значений пересекается для этой цели. Если в конструктор не было передано значения, используется 0.

Methods

IntersectionObserver.disconnect()

Отключает объект IntersectionObserver от наблюдения любой цели.

IntersectionObserver.observe()

Сообщает объекту IntersectionObserver целевой элемент для наблюдения.

IntersectionObserver.takeRecords()

Возвращает массив из объектов IntersectionObserverEntry для всех наблюдаемых целей.

IntersectionObserver.unobserve()

Сообщает объекту 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"));

Спецификации

Specification
Intersection Observer
# intersection-observer-interface

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также