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