Intersection Observer API

Категория: JavaScript

Intersection Observer API позволяет асинхронно следить за изменением пересечения элемента с его контейнером (или document viewport).

Дока: https://developer.mozilla.org/ru/docs/Web/API/Intersection_Observer_API

Пример отслеживания видимого элемента при scroll:

if (window.timelineObserver) {
    const elements = document.querySelectorAll('.timeline-container.scroll-content .sub-frame');
    elements.forEach((el) => {
      window.timelineObserver.unobserve(el);
    });
}

const options = {
    root: document.querySelector('.timeline-container.scroll-content'), // null: область видимости браузера (viewport) по умолчанию
    threshold: .5, // При 50% процентном пересечении видимой области отслеживаемого элемента с root-контейнером. Triggers "onIntersection".
    //rootMargin: '0px', // Отступы вокруг root, как CSS: margin: 10px 20px 30px 40px
};

// @note callback вызывается при изменении пересечения
function onIntersection(entries, opts){
  entries.forEach(entry => {
      console.log(entry);
      entry.target.classList.toggle('visible', entry.isIntersecting);
  });
};

// @note Создаем экземпляр наблюдателя
window.timelineObserver = new IntersectionObserver(onIntersection, options);

// Use the bserver to observe an element
//window.timelineObserver.observe(document.querySelector('#one-child'));

const boxElList = document.querySelectorAll('.timeline-container.scroll-content .sub-frame');
boxElList.forEach((el) => {
  window.timelineObserver.observe(el);
});

Опция threshold - число или массив чисел, указывающий, при каком проценте видимости целевого элемента должен сработать onIntersection() callback. Например, задаем: [0, 0.25, 0.5, 0.75, 1], чтобы callback функция вызывалась при появлении в зоне видимости каждые 25% целевого элемента.

Свойства объекта entry класс IntersectionObserverEntry:

const entry = {
  rootBounds:         DOMRectReadOnly {width: 1920, height: 100, x: 0,    y: 124, left: 0,    top: 124, right: 1920, bottom: 224},
  boundingClientRect: DOMRectReadOnly {width: 629,  height: 45,  x: 1601, y: 151, left: 1601, top: 151, right: 2230, bottom: 196},
  intersectionRect:   DOMRectReadOnly {width: 319,  height: 45,  x: 1601, y: 151, left: 1601, top: 151, right: 1920, bottom: 196},
  target: HTMLElement,
  intersectionRatio: 0.5071542263031006,
  isIntersecting: true,
  //isVisible: false, // Это экспериментальная возможность!
  time: 1906947.199999988
};
Примечание

Свойство isVisible является частью предлагаемых обновлений Intersection Observer v2, касающихся фактической видимости целевого элемента для пользователя. При передаче объекта параметров наблюдателю вы можете включить логическое значение «trackVisibility» для его реализации, но также требуется соответствующее свойство «delay». Значение этой задержки выражается в миллисекундах и должно быть минимум 100.
Если соответствующая задержка не указана, вы получите сообщение об ошибке в консоли, и наблюдатель не будет запущен.
Подробнее: https://web.dev/intersectionobserver-v2/

#javascript, #element is visible, #element visible

категория: JavaScript