> Как определить, что элемент находится в viewport в JavaScript (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Домклик

Стек: JavaScript

> Пример ответа

Для определения, находится ли элемент в видимой области окна (viewport), можно использовать метод IntersectionObserver - это современный и производительный способ. Пример:

JAVASCRIPT
const element = document.querySelector('.my-element');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент в viewport');
    } else {
      console.log('Элемент вне viewport');
    }
  });
});

observer.observe(element);

Если нужна поддержка старых браузеров, можно использовать вычисления через getBoundingClientRect():

JAVASCRIPT
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

IntersectionObserver предпочтительнее, так как он не вызывает перерасчетов при скролле и работает асинхронно, что снижает нагрузку на производительность.