IntersectionObserver: метод observe()

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2019 года.

Метод IntersectionObserver observe() добавляет элемент в набор целевых элементов, отслеживаемых IntersectionObserver. Один наблюдатель имеет один набор пороговых значений и один корень, но может отслеживать несколько целевых элементов для изменений видимости в соответствии с этими параметрами.

Чтобы прекратить наблюдение за элементом, вызовите IntersectionObserver.unobserve().

Когда видимость указанного элемента пересекает один из порогов видимости наблюдателя (как указано в IntersectionObserver.thresholds), вызывается обратный вызов наблюдателя с массивом объектов IntersectionObserverEntry, представляющих изменения пересечения, которые произошли. Обратите внимание, что эта конструкция позволяет обрабатывать изменения пересечения нескольких элементов в одном вызове обратного вызова.

Примечание: Обратный вызов наблюдателя callback всегда срабатывает в первом цикле рендеринга после вызова observe(), даже если наблюдаемый элемент еще не переместился относительно области просмотра. Это означает, что, например, элемент, находящийся вне области просмотра при вызове observe() для него, приведет к немедленному вызову обратного вызова с по крайней мере одной записью entry, в которой intersecting установлено в false. Элемент внутри области просмотра приведет к немедленному вызову обратного вызова с по крайней мере одной записью, в которой intersecting установлено в true.

Синтаксис

observe(targetElement)

Параметры

targetElement: Элемент element, чья видимость в корневой области должна отслеживаться. Этот элемент должен быть потомком корневого элемента (или находиться внутри текущего документа, если корень — область просмотра документа).

Возвращаемое значение

None (undefined).

Примеры

// Register IntersectionObserver
const io = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      // Add 'active' class if observation target is inside viewport
      entry.target.classList.add("active");
    } else {
      // Remove 'active' class otherwise
      entry.target.classList.remove("active");
    }
  });
});

// Declares what to observe, and observes its properties.
const boxElList = document.querySelectorAll(".box");
boxElList.forEach((el) => {
  io.observe(el);
});

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

Спецификация
Intersection Observer # dom-intersectionobserver-observe

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`observe`	51	15	55	38	12.1	51	55	41	12.2	5.0	51

См. также

IntersectionObserver.unobserve()

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/observe