JavaScript IntersectionObserver.thresholds — пороги видимості

Властивість thresholds — це частки видимості, на яких спостерігач має спрацювати: 0 (щойно з'явився край), 0.5 (половина), 1 (видно повністю).

правити

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

Задається при створенні як threshold (в однині), а читається як thresholds — масив, навіть якщо передали одне число. Ця розбіжність в іменах збиває з пантелику постійно.

Масив порогів дозволяє стежити за поступом: передавши [0, 0.25, 0.5, 0.75, 1], отримаєш подію на кожній чверті — так роблять індикатори прочитаного й аналітику видимості реклами.

Скільки саме видно, каже entry.intersectionRatio.

правити

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

Переглядачі

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

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

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

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

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

Приклади

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

<article id="article" style="height: 300px; background: #eef6ff;">Стаття</article>

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

const observer = new IntersectionObserver(entries => {
    for (const entry of entries) {
        const percent = Math.round(entry.intersectionRatio * 100);
        console.log('Видно на', percent + '%');
    }
}, {
    // задаємо threshold (однина)
    threshold: [0, 0.25, 0.5, 0.75, 1],
});

observer.observe(article);

// а читаємо thresholds (множина, масив)
console.log(observer.thresholds); // [0, 0.25, 0.5, 0.75, 1]