IntersectionObserver API,检测元素是否进入或离开视口

1、scrollIntoView 方法用于将元素滚动到视图中

document.getElementById('myElement').scrollIntoView();

IntersectionObserver 是个函数

const observer = new IntersectionObserver(callback)

observer.unobserve(entry.target);
observer.observe(ele)
observer.disconnect() callback = (entries:Array,observer)=>{ entries// 是一个数组，因为observer可以观察多个对象，

entry对象的属性

boundingClientRect: 目标元素的边界矩形信息。
intersectionRatio: 目标元素与根元素交集的比例。
intersectionRect: 目标元素与根元素交集的矩形信息。
isIntersecting: 一个布尔值，表示目标元素是否与根元素有交集。
rootBounds: 根元素的边界矩形信息（如果根元素是视口，则为 null）。
target: 目标元素，即被观察的元素。
time: 记录了交集变化发生的时间。

}

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

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('Element is in the viewport');
        } else {
            console.log('Element is not in the viewport');
        }
    });
}, {
    root: null, // use the viewport as the container
    rootMargin: '0px',
    threshold: 0.1 // 可视范围的百分比，trigger when at least 10% of the element is visible
});

observer.observe(myElement); // 监视元素
observer.disconnect() // 停止观察所有的目标元素，解除观察行为。