Веб-разработка
August 14, 2022

Интересное в JS. ViewPort intersection API

Кому будет интересно?

Будет интересно всем кто разрабатывает фронтенд.

Что это такое?

Иногда нам очень нужно понять находится ли элемент по вьюпорте или нет. Раньше был только несколько вариантов решения - чисто математически, наугад или вообще не делать этого, а просто редизайнить интерфейс.

А теперь есть очень простое АПИ, которое позволяет определить видимость не только во вьюпорте, но и внутри любого скролл-элемента.

Давайте разбрираться как это работает.

Наглядный пример

В примере ниже текст подсвечивается желтым только в тот момент когда определённые элементы попадают по вьюпорт

Реализация

Выбираем все необходимые элементы

const elements = document.querySelectorAll(".text-highlight");

Прописываем настройки для обзервера

const options = {
  root: null
  rootMargin: "30px", // Виртуальный отступ от границы
  threshold: 0.75
};

root

Корневой элемент который считается за область обзора. При null это будет нативный вьюпорт.

rootMargin

Виртуальный отступ от границы вьюпорта, от которой считается что элемент попал в область обзора

threshold

Указывает при каком проценте видимости объект должен давать сигнал о том что он попал во область обзора. Это может быть массив к примеру [0.25, 0,75] и тогда для каждого наблюдаемого элемента будет событие будет вызвано два раза - когда элемент видно на 25% и более и когда видно на 75% и более.

Это можно использовать для различных визуальных эффектов типо плавного появления и т.д.

Пишем какой-нибудь колбек

const callback = (entries, observer) => {
  entries.forEach(({ target, intersectionRatio }) => {
    console.log(intersectionRatio)
    if (intersectionRatio >= options.threshold) {
      
      target.classList.add("active");
    }
  });
};

entries

Каждый entry это объект в котором хранится target (обозреваемый элемент) и intersectionRatio (насколько процентов объект )

Создаем обозреватель

Создаем инстанс с колбеком и всеми необходимыми параметрами

const observer = new IntersectionObserver(callback, options);

Цепляем элементы

Далее просто цепляем все необходимые элементы к обозревателю

elements.forEach((element) => {
  observer.observe(element);
});

Что будет дальше?

А дальше обозреватель будет мониторить попадают ли элемент(-ы) в указанную область обзора. Как только элемент попадает в область сразу вызывается колбек.

Этой фиче есть очень много других применений. Можно, к примеру, без особых проблем реализовать бесконечный скролл или создать какую-то дополнительную интерактивность.

Итог

JS внутри браузера стремительно развиваются и хорошо бы почаще интересоваться различными штуками которые могут упростить жизнь разработчику и дать новый экспирианс пользователю

Спасибо за ваше внимание!

Больше материалов в моем Telegram-канале

https://t.me/dakotovblog