IntersectionObserver API позволяет тебе асинхронно отслеживать, когда целевой элемент входит или выходит из viewport (или указанного родительского элемента). В отличие от слушателей события scroll, наблюдение происходит вне главного потока, что делает его значительно более производительным.
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Element is visible');
}
});
});
observer.observe(targetElement);
root — родительский элемент, используемый как viewport (по умолчанию — viewport браузера)rootMargin — расширяет или сжимает границу root (например, "100px" для раннего срабатывания)threshold — значение от 0 до 1, определяющее, какая доля элемента должна быть видима перед вызовом колбэкаAPI IntersectionObserver выполняет свои callback-функции синхронно в основном потоке, подобно традиционным слушателям scroll-событий, но с лучшей оптимизацией.
Новый — ещё не проверен сообществом
Вы