IntersectionObserver是什么？IntersectionObserver的介绍

    let observer = new IntersectionObserver((e) => {
        let isintersecting = e[0].isIntersecting
        console.log(e[0].intersectionRatio)
        if (isintersecting) {
            console.log('我出来了');
        }else{
            console.log('我隐藏了');
        }
    }, {
        root: null
    })
    
    // 观察某个目标元素，一个观察者实例可以观察任意多个目标元素。
    observer.observe(document.querySelector('.scroll-down'))

IntersectionObserverEntry对象提供目标元素的信息，一共有六个属性。

options 主要有

{
    root: null, // 指定与目标元素相交的根元素，默认null为视口
    threshold: [] // [0, 0.5, 1] 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
    Magin：‘’ // "100px 0" 与margin类型写法，指定与跟元素相交时的延时加载
}
实例方法
observe()
观察某个目标元素，一个观察者实例可以观察任意多个目标元素。注意，这里可能有同学会问：能不能 delegate？能不能只调用一次 observe 方法就能观察一个页面里的所有 img 元素，甚至那些未产生的？答案是不能，这不是事件，没有冒泡。
unobserve()
取消对某个目标元素的观察，延迟加载通常都是一次性的，observe 的回调里应该直接调用 unobserve() 那个元素.
disconnect()
取消观察所有已观察的目标元素
takeRecords()
理解这个方法需要讲点底层的东西：在浏览器内部，当一个观察者实例在某一时刻观察到了若干个相交动作时，它不会立即执行回调，它会调用 window.requestIdleCallback() （目前只有 Chrome 支持）来异步的执行我们指定的回调函数，而且还规定了最大的延迟时间是 100 毫秒，相当于浏览器会执行：
requestIdleCallback(() => {
  if (entries.length > 0) {
    callback(entries, observer)
  }
}, {
  timeout: 100
})
以上就是IntersectionObserver是什么？IntersectionObserver的介绍的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：IntersectionObserver是啥？IntersectionObserver的介绍