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

destroy() {
    window.removeEventListener('scroll', this.scrollEvent)
  }
  // 单个元素
  observeSelectTools() {
    const selectTools = document.querySelector('.select-tools') as HTMLDivElement
    const { height } = selectTools.getBoundingClientRect() // 获取元素的位置 返回{s}
    selectTools.style.height = `${height}px`
    // boundingClientRect：目标元素的矩形区域的信息
    // intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
    const io = new window.IntersectionObserver(
      ([{ boundingClientRect, intersectionRatio }]) => {
        if (boundingClientRect.top > 0 && intersectionRatio < 1) {
          return false
        }
        this.fixedSelect = intersectionRatio < 1
        return true
      },
      // 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
      { threshold: [0, 1] }
    )
    io.USE_MUTATION_OBSERVER = false
    // 观察目标元素
    io.observe(selectTools)
    // 针对有的手机出现浮动的bug
    window.addEventListener('scroll', this.scrollEvent)
  }

// 多个元素时
observeSelectTools() {
    const selectTools = document.querySelector(`.select-tools-${this.activeName}`) as HTMLDivElement
    const parent = selectTools.parentNode as HTMLDivElement //获取当前元素的父元素
    const { height } = selectTools.getBoundingClientRect() // 方法返回元素的大小及其相对于视口的位置
    if (height > 0) {
      selectTools.style.height = `${height}px`
    }
    // boundingClientRect：目标元素的矩形区域的信息
    // intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
    const io = new window.IntersectionObserver(
      ([{ boundingClientRect, intersectionRatio }]) => {
        if (parent.getBoundingClientRect().height === 0
        || (boundingClientRect.top > 0 && intersectionRatio < 1)) {
          return false
        }
        this.fixedSelect = intersectionRatio < 1
        return true
      },
      // 当目标元素和根元素相交的面积占目标元素面积的百分比到达或跨过某些指定的临界值时就会触发回调函数
      { threshold: [0, 1] }
    )
    io.USE_MUTATION_OBSERVER = false
    // 观察目标元素
    io.observe(selectTools)
    // 针对有的手机出现浮动的bug
    window.addEventListener('scroll', this.scrollEvent)
  }

  scrollEvent() {
    timer && clearTimeout(timer)
    timer = setTimeout(() => {
      const selectTools = document.querySelector('.select-tools') as HTMLDivElement
      if (!selectTools) return
      const { top } = selectTools.getBoundingClientRect()
      if (top > 0) {
        this.fixedSelect = false
      }
    }, 100)
  }