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

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"));

Help improve MDN

Was this page helpful to you?

Yes No

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

Intersection Observer API
IntersectionObserver
Конструктор
1. IntersectionObserver()
Свойства экземпляра
Методы экземпляра
Похожие страницы для Intersection Observer API
1. IntersectionObserverEntry
Руководства
1. Синхронизация видимости элемента с Intersection Observer API

IntersectionObserver

In this article

Constructor

Properties

Methods

Examples

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

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

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

Help improve MDN