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

Как понять, что элемент находится во ViewPort

Для определения видимости элемента в области просмотра (ViewPort) можно использовать Intersection Observer API - современный и производительный способ.

Пример:

javascript

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

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

text


Альтернативно можно использовать 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 лучше для сложных случаев (ленивая загрузка, бесконечный скролл)
getBoundingClientRect проще, но может вызывать рефлоуы при частых вызовах

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

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

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

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

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

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

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

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

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