IntersectionObserver

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

Constructor

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

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

Specifications

Specification Status Comment
Intersection Observer
Определение 'IntersectionObserver' в этой спецификации.
Рабочий черновик

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
IntersectionObserver
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 38Safari Полная поддержка 12.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android Полная поддержка 41Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
IntersectionObserver() constructor
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 38Safari Полная поддержка 12.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android ? Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
disconnect
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15
Замечания
Полная поддержка 15
Замечания
Замечания Available since Windows Insider Preview Build 14986
Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari ? WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 5.0
observe
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 12.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android ? Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
root
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 12.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android ? Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
rootMargin
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 12.1
Замечания
Полная поддержка 12.1
Замечания
Замечания rootMargin does not work with <iframe>s.
WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android ? Safari iOS Полная поддержка 12.2
Замечания
Полная поддержка 12.2
Замечания
Замечания rootMargin does not work with <iframe>s.
Samsung Internet Android Полная поддержка 5.0
takeRecords
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15
Замечания
Полная поддержка 15
Замечания
Замечания Available since Windows Insider Preview Build 14986
Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari ? WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Полная поддержка 5.0
thresholds
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 12.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android ? Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0
unobserve
Экспериментальная
Chrome Полная поддержка 51Edge Полная поддержка 15
Замечания
Полная поддержка 15
Замечания
Замечания Available since Windows Insider Preview Build 14986
Firefox Полная поддержка 55
Полная поддержка 55
Нет поддержки 53 — 55
Отключено
Отключено From version 53 until version 55 (exclusive): this feature is behind the dom.IntersectionObserver.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка ДаSafari Полная поддержка 12.1WebView Android Полная поддержка 51Chrome Android Полная поддержка 51Firefox Android ? Opera Android ? Safari iOS Полная поддержка 12.2Samsung Internet Android Полная поддержка 5.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

See also