IntersectionObserver

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨март 2019 г.⁩.

* Some parts of this feature may have varying levels of support.

Интерфейс 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

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

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

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨12 мая 2024 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content