ResizeObserver和IntersectionObserver作用

1 IntersectionObserver是监听DOM元素是否可见

const intersectionObserver = new IntersectionObserver((entries) => {
    // 如果 intersectionRatio 为 0，则目标在视野外，
    if (entries[0].intersectionRatio <= 0) return
    // dosomething  逻辑操作
})
  // 开始监听的某个盒子的类名
  const body = document.querySelector('.domClassName');
  intersectionObserver.observe(body)
 // 或 intersectionObserver.observe(...document.querySelector('.domClassName'))
  
   // 结束监听

 intersectionObserver.unobserve(body)

2 ResizeObserver是监听DOM元素宽高的变化，需要注意的一点就是监听出变化结果是contentBox的宽度和高度

useEffect(()=>{
const resizeObserver = new ResizeObserver((entries) => {
    // dosomething 逻辑代码
    console.log('Size changed')
})
// 开始监听
  resizeObserver.observe(document.querySelector('.demoClass'))
// 结束监听
return  resizeObserver.unobserve(document.querySelector('.demoClass'))
},[])