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
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