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

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

• фронтенд, определение видимости элемента
• определяем положение элемента относительно области просмотра браузера
• применяем метод getBoundingClientRect(): он возвращает координаты элемента
• сравниваем: top ≥ 0 && left ≥ 0 && bottom ≤ viewport height && right ≤ viewport width
• если достаточно частичной видимости, проверяем пересечение координат
• другой вариант — Intersection Observer API, который асинхронно и эффективно отслеживает видимость
• подходит для ленивой загрузки, анимаций и повышения производительности

Позволяет эффективно определить факт и степень видимости элемента с учетом прокрутки и изменения размеров окна.

Подробный ответ

Основной ответ

Чтобы установить, виден ли элемент во viewport (области видимости страницы), применяют методы, сопоставляющие положение элемента с границами окна браузера. Наиболее современный и удобный вариант — Intersection Observer API: он асинхронно отслеживает пересечение элемента с viewport. Также можно получить координаты через getBoundingClientRect() и сравнить их с размерами окна (window.innerHeight, window.innerWidth).

Ключевые моменты

• С помощью Intersection Observer API (поддерживается начиная с Chrome 51+ и Firefox 55+) можно отслеживать пересечение элемента с viewport либо с другим ancestor-элементом. Такой подход снижает нагрузку и избавляет от необходимости постоянно выполнять перерасчеты во время прокрутки.
• При классической проверке метод element.getBoundingClientRect() возвращает координаты относительно viewport. Элемент считается видимым, когда его границы пересекаются с видимой областью, то есть rect.top >= 0 && rect.bottom <= window.innerHeight.
• Важно принимать во внимание частичную видимость, перекрытие элемента другими объектами и наличие горизонтальной прокрутки.
• Intersection Observer также поддерживает порог видимости (threshold): например, callback может запускаться, когда отображается 50% элемента.

Практический контекст

В прикладных проектах Intersection Observer часто применяют для ленивой загрузки изображений, создания бесконечной прокрутки и анализа видимости рекламных объявлений без лишних потерь производительности. Для устаревших браузеров можно использовать fallback на getBoundingClientRect() с обработчиками событий scroll и resize, однако такой вариант работает менее эффективно.