Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: javascript, viewport

Как определить, что элемент виден во viewport?

Вопрос проверяет знание методов отслеживания видимости элементов.

Короткий ответ

Используйте IntersectionObserver для эффективного отслеживания видимости. Альтернативно — сравнение координат элемента с размерами viewport.

Длинный ответ

1. IntersectionObserver (современный способ):

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент в зоне видимости');
    }
  });
});

observer.observe(document.querySelector('.element'));

2. Проверка координат (устаревший способ):

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

Вывод:
IntersectionObserver — предпочтительный метод из-за производительности и простоты.

Уровень

  • Рейтинг:

    2

  • Сложность:

    8

Навыки

  • JavaScript

    JavaScript

Ключевые слова

#javascript

#viewport

Подпишись на React Developer в телеграм