惑鹿

HTML IntersectionObserver api

69浏览 2025-7-5 科技综合 MA106109

IntersectionObserver api是一个判断HTML元素与其父元素(默认窗口)的显示大小并且执行function的函数,大致结构如下,当然这里我只讲了几个api剩下的之后用到在看看加上来吧<(。_。)>.


创建实例

```html

const observer = new IntersectionObserver(

你要执行的function

        ,

        {

//root: 父元素(默认window)

          root: cover,

//父元素如果有margin需要填写相同margin(默认0)

rootMargin: '0px',

/*

出现百分之多少后执行(接受数组)

下面的是出现10%跟100%都触发

*/

          threshold: [0.1, 1]

        }

      )

```


添加监听

```html

//这是在监听cover下的element元素的漏出度

      observer.observe(element)

```


移除监听

```html

//移除element上的监听

observer.unobserve(element)


//移除所有监听

observer.disconnect()

```


tips

在添加监听的时候会自动执行一次要执行的function,可以加一个跳过第一次触发的布林值

未经作者允许,禁止转载
#HTML #IntersectionObserver
10