Web API: Intersection Observer API для наблюдения за пересечениями

Intersection Observer API позволяет определить, когда элемент входит или покидает область просмотра. Это чрезвычайно полезно для реализации бесконечной прокрутки и других динамических интерфейсов.

Когда вы загружаете большой объём данных, вы можете использовать бесконечную прокрутку. С помощью Intersection Observer API можно определить, когда пользователь прокручивает к определенной точке страницы, и загрузить дополнительные данные во время этой прокрутки. Это может существенно сократить время загрузки и улучшить пользовательский опыт.

Для начала нужно создать пример html страницы с блоками:

<style>
.item{
margin:50px 0;
height:500px;
background-color:#dcdcdc;
text-align:center;
line-height:500px;
}
</style>

<div class="item">Блок 1</div>
<div class="item">Блок 2</div>
<div class="item">Блок 3</div>
<div class="item">Блок 4</div>

При прокручивании страницы по мере появления блоков в зоне видимости в консоль будут отправляться сообщения: Блок % виден

const items = document.querySelectorAll('.item');

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0.5
};

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(`${entry.target.textContent} виден`);
    }
  });
}, options);

items.forEach(item => {
  observer.observe(item);
});