JavaScript IntersectionObserver.rootMargin — запас навколо області

Властивість rootMargin розширює або звужує область спостереження — як margin у CSS.

правити

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

Це те, завдяки чому ліниве завантаження не помітне. З rootMargin: '200px' спостерігач спрацює за 200 пікселів до того, як елемент з'явиться на екрані — і картинка встигне завантажитись, доки користувач до неї догортає.

Додатні значення розширюють область, від'ємні звужують — так можна спрацьовувати, лише коли елемент опинився в центрі екрана.

Синтаксис такий самий, як у margin: '200px 0', '10% 0px'.

правити

Нотатка

Значення мають бути в пікселях або відсотках — інші одиниці кидають помилку. І порожні одиниці не можна: '200' не спрацює, треба '200px'.

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

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

Переглядачі

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

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

Переглядач
	51	55	12.1	38	15	—

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

Переглядач
	51	51	55	12.2

Приклади

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

<div style="height: 400px"></div>
<img id="lazy" src="/img/logo.svg" width="100" alt="Лінива картинка">

function load(entries) {
    entries.forEach(entry => console.log('Елемент видно:', entry.isIntersecting));
}

const observer = new IntersectionObserver(load, {
    // спрацює ЗАЗДАЛЕГІДЬ — користувач не помітить завантаження
    rootMargin: '300px 0px',
});

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

// від'ємне значення — навпаки, звужує область:
// спрацює лише коли елемент у центрі екрана
const centered = new IntersectionObserver(entries => {}, {
    rootMargin: '-40% 0px',
});