---
title: IntersectionObserver
slug: Web/API/IntersectionObserver
tags:
  - API
  - Experimental
  - Interface
  - Intersection Observer
  - Intersection Observer API
  - Reference
  - observers
translation_of: Web/API/IntersectionObserver
---
<div>{{APIRef("Intersection Observer API")}}</div>

<p>Интерфейс <code><strong>IntersectionObserver</strong></code> в составе <a href="/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> <span class="seoSummary">предоставляет возможность асинхронного наблюдения за изменением пересечения целевого элемента с вышестоящим элементом или с верхоуровневым {{Glossary('viewport')}} документа.</span> Вышестоящий элемент или viewport считается корнем.</p>

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

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{domxref("IntersectionObserver.IntersectionObserver()")}}</dt>
 <dd>Создаёт новый объект <code>IntersectionObserver</code>, который будет запускать специальную колбэк-функцию, когда обнаружит пересечение одного или нескольких пороговых значений видимостью целевого элемента.</dd>
</dl>

<h2 id="Properties">Properties</h2>

<dl>
 <dt>{{domxref("IntersectionObserver.root")}} {{readonlyinline}}</dt>
 <dd>Конкретный предок наблюдаемого целевого {{domxref("element")}}. Если в конструктор не было передано значения или оно <code>null</code>, будет использован viewport документа.</dd>
 <dt>{{domxref("IntersectionObserver.rootMargin")}} {{readonlyinline}}</dt>
 <dd>Смещение прямоугольника (<em>пер.</em> "An offset rectangle"), применяемое к {{Glossary('bounding box')}} корня при расчёте пересечений, эффективно сжимает или увеличивает корень для целей расчёта. Возвращаемое этим свойством значение может не совпадать со значением, указанным при вызове конструктора, поскольку оно может быть изменено в соответствии с внутренними требованиями. Каждое смещение может быть выражено в пикселях (<code>px</code>) или в процентах (<code>%</code>). Значение по умолчанию "0px 0px 0px 0px".</dd>
 <dt>{{domxref("IntersectionObserver.thresholds")}} {{readonlyinline}}</dt>
 <dd>Список порогов, отсортированный по возрастанию, где каждый порог представляет собой отношение площади пересечения к ограничивающей области наблюдаемой цели. Уведомления для цели генерируются, когда любое из пороговых значений пересекается для этой цели. Если в конструктор не было передано значения, используется 0.</dd>
</dl>

<h2 id="Methods">Methods</h2>

<dl>
 <dt>{{domxref("IntersectionObserver.disconnect()")}}</dt>
 <dd>Отключает объект <code>IntersectionObserver</code> от наблюдения любой цели.</dd>
 <dt>{{domxref("IntersectionObserver.observe()")}}</dt>
 <dd>Сообщает объекту <code>IntersectionObserver</code> целевой элемент для наблюдения.</dd>
 <dt>{{domxref("IntersectionObserver.takeRecords()")}}</dt>
 <dd>Возвращает массив из объектов {{domxref("IntersectionObserverEntry")}} для всех наблюдаемых целей.</dd>
 <dt>{{domxref("IntersectionObserver.unobserve()")}}</dt>
 <dd>Сообщает объекту <code>IntersectionObserver</code> прекратить наблюдение за конкретным целевым элементом.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<pre class="brush: js">var intersectionObserver = new IntersectionObserver(function(entries) {
  // Если intersectionRatio равен 0, цель вне зоны видимости
  // и нам не нужно ничего делать
  if (entries[0].intersectionRatio &lt;= 0) return;

  loadItems(10);
  console.log('Loaded new items');
});
// начать наблюдение
intersectionObserver.observe(document.querySelector('.scrollerFooter'));</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("IntersectionObserver", "#intersection-observer-interface", "IntersectionObserver")}}</td>
   <td>{{Spec2('IntersectionObserver')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{domxref('MutationObserver')}}</li>
 <li>{{domxref('PerformanceObserver')}}</li>
 <li>{{domxref('ResizeObserver')}}</li>
</ul>