浏览器观察者 Observer API

随着浏览器的发展，现代浏览器支持四种不同类型的观察者。

1.Intersection Observer   交叉观察者

2.Mutation Observer        变动观察者

3.Resize Observer           视图观察者

4.Performance Observer  性能观察者

用途：

1.IntersectionObserver    观察一个元素是否在视窗可见。

        一共有三个方法          observe()             指定一个观察者
                                           disconnect()         停止所有目标监听
                                            takeRecords()

基本使用

const options = {
    root: document.querySelector('.scrollContainer'),
    rootMargin: '0px',
    threshold: [0.3, 0.5, 0.8, 1] 
  }

const observer = new IntersectionObserver(handler, options)

const target = document.querySelector(“.targetBox”); 

observer.observe(target);

function handler (entries, observer) { 
    entries.forEach(entry => { 
    // 每个成员都是一个IntersectionObserverEntry对象。
    // 举例来说，如果同