JavaScript IntersectionObserver.root — область спостереження

Властивість root — це контейнер, відносно якого рахується видимість. За замовчуванням — саме вікно браузера.

правити

Загальний опис

Задавати її треба тоді, коли елементи прокручуються не сторінкою, а всередині блоку — довгий список у модальному вікні, чат, бічна панель.

Без неї спостерігач дивитиметься на вікно й повідомить «елемент видно», хоч насправді він схований під прокруткою власного контейнера.

Важлива умова: root має бути предком спостережуваних елементів. Інакше нічого не спрацює — тихо, без помилки.

правити

Нотатка

root лише читається. Змінити його після створення спостерігача не можна — потрібен новий.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
root	51+	55+	12.1+	38+	15+	-

Підтримка: мобільні переглядачі

Переглядач
root	51+	yes	yes	12.2+

Приклади

+ запропонувати свій приклад у пісочниці

<div id="chat" style="height:200px;overflow-y:auto">
    <div id="top"></div>
</div>

// умовна тривала операція для прикладу
function loadOlderMessages() {
    for (let i = 0; i < 1e6; i++);
}

const chat = document.getElementById('chat');

const observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) {
        loadOlderMessages();
    }
}, {
    // дивимось на контейнер, а не на вікно
    root: chat,
});

observer.observe(document.getElementById('top'));

console.log(observer.root === chat); // true