Свойства API-интерфейса IntersectionObserver

IntersectionObserverEntry.target

Свойство IntersectionObserverEntry.target возвращает наблюдаемый элемент. Это полезно, если вы планируете манипулировать элементом (добавлять или удалять классы, переключать анимацию и т.д.), когда он входит или выходит из области просмотра.

let observer = new IntersectionObserver(function (entries, observer) {
  for (let entry of entries) {
    console.log(entry.target);
  }
});

IntersectionObserverEntry.isIntersecting

Свойство IntersectionObserverEntry.isIntersecting возвращает логическое значение: true, если элемент находится в области просмотра, и false, если нет.

let observer = new IntersectionObserver(function (entries, observer) {
  for (let entry of entries) {
    console.log(entry.isIntersecting);
  }
});

IntersectionObserverEntry.boundingClientRect

Свойство IntersectionObserverEntry.boundingClientRect возвращает объект DOMRect, содержащий сведения о размере и положении элемента в области просмотра. Все размеры указаны в пикселях.

• top/y — Расстояние от верхней части элемента до верхней границы области просмотра.
• bottom — Расстояние от нижней части элемента до верхней части области просмотра.
• left/x — Расстояние от левой стороны элемента до левой стороны области просмотра.
• right — Расстояние от правой стороны элемента до левой стороны области просмотра.
• height — Высота элемента.
• width — Ширина элемента.

let observer = new IntersectionObserver(function (entries, observer) {
  for (let entry of entries) {
    console.log(entry.boundingClientRect);
  }
});

IntersectionObserverEntry.rootBounds

Свойство IntersectionObserverEntry.rootBounds возвращает объект DOMRect, содержащий сведения о видовом экране (или другом пересекающемся элементе).

let observer = new IntersectionObserver(function (entries, observer) {
  for (let entry of entries) {
    console.log(entry.rootBounds);
  }
});

Другие свойства

Есть и другие свойства, но именно к этим я обращаюсь чаще всего.