Intersection Observer API 图片懒加载、无限滚动、视口交叉

let options = {
    root: document.querySelector('#scrollArea'), // 可以是任何元素，或者不设置，表示相对于视口
    rootMargin: '0px', // 类似css的margin，可以是px，也可以是百分比
    threshold: 1.0 // 目标元素的可见比例，1.0表示完全可见，0表示完全不可见，也可设置0.8既需要80%区域在视口区域
}

let observer = new IntersectionObserver(callback, options);

let target = document.querySelector('#target');
observer.observe(target); // 开始观察

function callback(entries, observer) {
    entries.forEach(entry => {
        // 每个entry都是一个IntersectionObserverEntry对象
        // entry.isIntersecting 是一个布尔值，表示目标元素是否在视口中
        if (entry.isIntersecting) {
            console.log('目标元素在视口中');
        } else {
            console.log('目标元素不在视口中');
        }
    });
}