[JavaScript知识库]前端滚动页面获取可见区域dom

/*
 * @Description: 监控dom是否在可视范围内
 * @Author: wangrui
 * @Date: 2021-08-05 13:59:58
 */
export default class ViewPortLog {
  constructor(option) {
    // const {
    //   type 埋点方式
    //   targetClass,目标元素class类
    //   cb 回调函数
    // }=option;
    this.option = option;
    option && option.type==='domLog' && this.initDom();
  }

  // 获取浏览器视口高度
  initDom() {
    // 窗口可视高度
    this.viewPortHeight = window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
  }

  // 方法一 IntersectionObserver 推荐使用
  getObserveDom() {
    const {
      targetClass
    } = this.option;
    const observer = new IntersectionObserver(isInObserve, { threshold: 1.0 });
    const item = document.getElementsByClassName(targetClass);
    for (let i = 0; i < item.length; i++) {
      observer.observe(item[i]);
    }

    function isInObserve(entries, observer) {
      entries.forEach((item) => { // 遍历entries数组
        if (item.isIntersecting) { // 当前元素可见
          // 派发事件在可视区域内
          this.option && this.option.cb(item.target)
          observer.unobserve(item.target)  // 停止观察当前元素 避免不可见时候再次调用callback函数
        }
      })
    }
  }

  // 方法二 DOM 需要绑定滚动事件 
  getViewportDom() {
    // 可视区域目标dom
    const {
      targetClass
    } = this.option;
    const item = document.getElementsByClassName(targetClass);

    const { scrollTop } = document.documentElement;
    for (let i = 0; i < item.length; i++) {
      const { offsetTop } = item[i];
      const top = offsetTop - scrollTop;
      if (top <= this.viewPortHeight) {

        // 派发事件在可视区域内
        this.option && this.option.cb(item, i)
      }
    }

  }

}   
//   domLog调用方式
//   new ViewPortLog({
//     targetClass:'log_item',
//     cb:(el,i)=>{}
//   }).getViewportDom()

//   IntersectionObserver调用方式
//   new ViewPortLog({
//     targetClass:'log_item',
//     cb:(el)=>{}
//   }).getObserveDom()