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('目标元素不在视口中');
}
});
}
Intersection Observer API 图片懒加载、无限滚动、视口交叉
最新推荐文章于 2023-11-29 14:51:05 发布