IntersectionObserver监听DOM获取可视区域, 解决遮盖问题

场景：

在表格中, 点击行需要弹出一个弹窗。当点最后一行时，弹窗会被遮住。

IntersectionObserver浏览器构造器

当一个IntersectionObserver对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。

代码---页面加载后

onMounted(() => {
      // 监听同义词弹窗是否全在可视区域内
      data.io = new IntersectionObserver((entries) => {
        // intersectionRatio小于1, 代表展示不全
        if (entries[0].intersectionRatio < 1) {
          // 遮住的区域高度
          const shadeHeight = entries[0].boundingClientRect.height * (1 - entries[0].intersectionRatio)
          // 展示不全, 上移弹窗
          entries[0].target.style.top = `-${shadeHeight + 10}px`
          // 下移弹窗的左侧箭头
          const imgDom = entries[0].target.children[1]
          imgDom.style.top = `${shadeHeight + 18}px`
        }
      })
    })

代码---弹窗显示

// 开启观察
data.io.observe(document.querySelector('.pop-box'))

代码---弹窗消失

// 移除观察
data.io.unobserve(dom)

代码---页面关闭

// 关闭观察器
data.io.unobserve(dom)

参考文献: # IntersectionObserver API 使用教程