Встречается на собеседованиях • сегодня

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

Для отслеживания появления элемента в области видимости (viewport) можно использовать Intersection Observer API. Это современный и эффективный способ, который не требует постоянных проверок через scroll события.

javascript

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент в зоне видимости!', entry.target);
      // Действия при появлении элемента
      observer.unobserve(entry.target); // Отключить наблюдение при необходимости
    }
  });
}, { threshold: 0.1 }); // Порог видимости (10%)

const targetElement = document.querySelector('.my-element');
observer.observe(targetElement);

text


**Ключевые моменты:**
- `threshold` определяет процент видимости элемента (0-1)
- Можно наблюдать за несколькими элементами одновременно
- Оптимизирован для производительности
- Поддерживается во всех современных браузерах

Для старых браузеров можно использовать полифил или проверять позицию элемента через `getBoundingClientRect()`, но это менее эффективно.

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!

Попробовать бесплатно

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы