IntersectionObserver

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

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

* Некоторые части этой функции могут иметь различный уровень поддержки.

Интерфейс IntersectionObserver API наблюдателя пересечений предоставляет способ асинхронного наблюдения за изменениями пересечения целевого элемента с родительским элементом или с областью просмотра документа верхнего уровня. Родительский элемент или область просмотра называются корнем.

Когда создается IntersectionObserver, он настраивается для наблюдения за заданными соотношениями видимости в корне. Настройки нельзя изменить после создания IntersectionObserver, поэтому объект наблюдателя полезен только для наблюдения за конкретными изменениями степени видимости; однако вы можете наблюдать за несколькими целевыми элементами с помощью одного наблюдателя.

Конструктор

IntersectionObserver(): Создаёт новый объект IntersectionObserver, который выполнит указанную функцию обратного вызова, когда обнаружит, что видимость целевого элемента пересекла одну или несколько пороговых значений.

Свойства экземпляра

IntersectionObserver.root Только для чтения: Element или Document, границы которых используются в качестве области для проверки пересечения. Если в конструктор не было передано значение root, или его значение null, используется область просмотра документа верхнего уровня.
IntersectionObserver.rootMargin Только для чтения: Прямоугольник смещения, применяемый к области корня при расчёте пересечений, фактически сужая или расширяя корень для расчётов. Возвращаемое значение этого свойства может отличаться от значения, указанного при вызове конструктора, так как оно может быть изменено для соответствия внутренним требованиям. Каждый смещение может быть выражен в пикселях (px) или в процентах (%). Значение по умолчанию - "0px 0px 0px 0px".
IntersectionObserver.thresholds Только для чтения: Список пороговых значений, отсортированных по возрастанию, где каждое пороговое значение представляет собой отношение площади пересечения к площади области целевого элемента. Уведомления о целевом элементе генерируются, когда любое из пороговых значений пересекается для этого элемента. Если в конструктор не было передано значение, используется 0.

Методы экземпляра

IntersectionObserver.disconnect(): Прекращает наблюдение объекта IntersectionObserver за любым целевым элементом.
IntersectionObserver.observe(): Сообщает IntersectionObserver о наблюдении за целевым элементом.
IntersectionObserver.takeRecords(): Возвращает массив объектов IntersectionObserverEntry для всех наблюдаемых целевых элементов.
IntersectionObserver.unobserve(): Сообщает IntersectionObserver остановить наблюдение за определённым целевым элементом.

Примеры

const intersectionObserver = new IntersectionObserver((entries) => {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  loadItems(10);
  console.log("Loaded new items");
});
// start observing
intersectionObserver.observe(document.querySelector(".scrollerFooter"));

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

Спецификация
Intersection Observer # intersection-observer-interface

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`IntersectionObserver`	51	15	55 Перед версией 96, конструктор выбрасывает `DOMException` если параметр `options.rootMargin` передан пустой строкой (см. баг 1738791).	38	12.1	51	55	41	12.2	5.0	51
`IntersectionObserver`	51	15	55	38	12.1	51	55	41	12.2	5.0	51
`delay`	74	79	Нет	62	Нет	74	Нет	53	Нет	11.0	74
`disconnect`	51	15 Доступно начиная с Windows Insider Preview Build 14986.	55	38	12.1	51	55	41	12.2	5.0	51
`observe`	51	15	55	38	12.1	51	55	41	12.2	5.0	51
`root`	51	15	55	38	12.1	51	55	41	12.2	5.0	51
`rootMargin`	51	15	55	38	12.1 `rootMargin` не работает с `<iframe>`.	51	55	41	12.2 `rootMargin` не работает с `<iframe>`.	5.0	51
`scrollMargin`	120	120	Нет	106	Нет	120	Нет	80	Нет	25.0	120
`takeRecords`	51	15 Доступно начиная с Windows Insider Preview Build 14986.	55	38	12.1	51	55	41	12.2	5.0	51
`thresholds`	52	15	55	39	12.1	52	55	41	12.2	6.0	52
`trackVisibility`	74	79	Нет	62	Нет	74	Нет	53	Нет	11.0	74
`unobserve`	51	15 Доступно начиная с Windows Insider Preview Build 14986.	55	38	12.1	51	55	41	12.2	5.0	51

См. также

© 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