vue 判断组件进入可视区域

1、mounted 监听 监听元素是否进入/移出可视区域

window.addEventListener("scroll", this.scrollHandle, true); // 监听 监听元素是否进入/移出可视区域

2、 methods 执行事件

scrollHandle() {
      const offset = this.$el.getBoundingClientRect();
      const offsetTop = offset.top;
      const offsetBottom = offset.bottom;
      // const offsetHeight = offset.height;
      // 进入可视区域
      // console.log(offsetTop,offsetBottom)
      if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
        // console.log('进入可视区域');
      
      } else {
        // console.log('移出可视区域');
 
      }
    }

3、记得在适当的时候移除事件监听

window.removeEventListener('scroll', this.scrollHandle, true);

赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞赞