Intersection Observer API — это современный веб-API, который позволяет отслеживать, когда элемент появляется или исчезает из области видимости (viewport) без постоянной проверки через скролл-события.
Инициализация и использование:
Чтобы создать Observer, вызываем конструктор:
const observer = new IntersectionObserver(callback, options);.
- callback — функция, которая будет вызываться при пересечении наблюдаемых элементов.
- options — объект с настройками: root (область просмотра), rootMargin
(отступы) и threshold (порог срабатывания).
После этого добавляем элементы для отслеживания через observer.observe(element).
Когда этот конкретный элемент больше не нужен, можно вызвать observer.unobserve(element), а когда
Observer полностью не
нужен и мы хотим перестать наблюдать все элементы — observer.disconnect().
// Настройки Observer
const options = {
root: null, // Корневой элемент для наблюдения (viewport)
rootMargin: '0px 0px 300px 0px', // Смещение, чтобы срабатывать раньше снизу
threshold: 1.0, // 0 = элемент хоть немного виден, 1 = полностью виден
};
// Функция обратного вызова
const callback = function (entries, observer) {
entries.forEach(entry => {
// entry — информация о наблюдаемом элементе
// entry.isIntersecting — true, если элемент виден
// entry.target — сам элемент
// observer — можно управлять наблюдением:
// observer.unobserve(entry.target) — перестать отслеживать элемент
// observer.disconnect() — отключить observer полностью
if (entry.isIntersecting) {
console.log('Элемент виден:', entry.target);
// Здесь можно подгружать контент или запускать анимацию
}
});
};
// Создаём Observer
const observer = new IntersectionObserver(callback, options);
// Начинаем наблюдать
const target = document.querySelector('.js-guard');
observer.observe(target);