IntersectionObserver是什么？IntersectionObserver的介绍1

IntersectionObserver是什么？IntersectionObserver的介绍

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于IntersectionObserver是什么？IntersectionObserver的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

允许你追踪目标元素与其祖先元素或视窗的交叉状态。此外，尽管只有一部分元素出现在视窗中，哪怕只有一像素，也可以选择触发回调函数。

IntersectionObserver 为什么需要它？

在我们需要监听目标元素是否进入视口时，需要监听scroll事件，大量的计算会造成性能问题

IntersectionObserver 怎么解决这个问题？

IntersectionObserver API 是异步的，不随着目标元素的滚动同步触发。即只有线程空闲下来，才会执行观察器。这意味着，这个观察器的优先级非常低，只在其他任务执行完，浏览器有了空闲才会执行。

IntersectionObserverEntry 对象

new IntersectionObserver(callback, options)

    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类型写法，指定与跟元素相交时的延时加载 }

requestIdleCallback(() => { if (entries.length > 0) { callback(entries, observer) } }, { timeout: 100 })

以上就是IntersectionObserver是什么？IntersectionObserver的介绍的详细内容，更多请关注php中文网其它相关文章！

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

……

标签:IntersectionObserver是啥？IntersectionObserver的介绍

IntersectionObserver是什么？IntersectionObserver的介绍

实例方法

observe()

unobserve()

disconnect()

takeRecords()