Интересное в JS. ViewPort intersection API
Кому будет интересно?
Будет интересно всем кто разрабатывает фронтенд.
Что это такое?
Иногда нам очень нужно понять находится ли элемент по вьюпорте или нет. Раньше был только несколько вариантов решения - чисто математически, наугад или вообще не делать этого, а просто редизайнить интерфейс.
А теперь есть очень простое АПИ, которое позволяет определить видимость не только во вьюпорте, но и внутри любого скролл-элемента.
Давайте разбрираться как это работает.
Наглядный пример
В примере ниже текст подсвечивается желтым только в тот момент когда определённые элементы попадают по вьюпорт
Реализация
Выбираем все необходимые элементы
const elements = document.querySelectorAll(".text-highlight");
Прописываем настройки для обзервера
const options = { root: null rootMargin: "30px", // Виртуальный отступ от границы threshold: 0.75 };
Корневой элемент который считается за область обзора. При null
это будет нативный вьюпорт.
Виртуальный отступ от границы вьюпорта, от которой считается что элемент попал в область обзора
Указывает при каком проценте видимости объект должен давать сигнал о том что он попал во область обзора. Это может быть массив к примеру [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"); } }); };
Каждый entry это объект в котором хранится target (обозреваемый элемент) и intersectionRatio (насколько процентов объект )
Создаем обозреватель
Создаем инстанс с колбеком и всеми необходимыми параметрами
const observer = new IntersectionObserver(callback, options);
Цепляем элементы
Далее просто цепляем все необходимые элементы к обозревателю
elements.forEach((element) => { observer.observe(element); });
Что будет дальше?
А дальше обозреватель будет мониторить попадают ли элемент(-ы) в указанную область обзора. Как только элемент попадает в область сразу вызывается колбек.
Этой фиче есть очень много других применений. Можно, к примеру, без особых проблем реализовать бесконечный скролл или создать какую-то дополнительную интерактивность.
Итог
JS внутри браузера стремительно развиваются и хорошо бы почаще интересоваться различными штуками которые могут упростить жизнь разработчику и дать новый экспирианс пользователю