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 |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `MutationObserver`
* `PerformanceObserver` (en-US)
* `ResizeObserver` (en-US)