IntersectionObserver

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

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

Constructor

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

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

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

Browser compatibility

BCD tables only load in the browser

See also