vue如何监听dom元素滚动到了可视区？

vue如何监听dom元素滚动到了可视区？

场景：当某个元素滚动到可视区时，为其添加动画样式(animate.css)。

common/utils.js

export const isElementNotInViewport = function(el) {
	if (el) {
		let rect = el.getBoundingClientRect();
		return (
			rect.top >=
				(window.innerHeight || document.documentElement.clientHeight) ||
			rect.bottom <= 0
		);
	}
};

在组件内的使用

import { isElementNotInViewport } from "common/utils";
export default {
   ...
  data() {
    return {
      header_Animate: false
    }
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener("scroll", this.scrollToTop);
  },
  beforeRouteLeave(to, form, next) {
    // 离开路由移除滚动事件
    window.removeEventListener('scroll',this.scrollToTop);
    next();
  },
  methods: {
    // 滚动事件
    scrollToTop() {
	  !isElementNotInViewport(this.$refs.header) ? this.header_Animate = true: '';
    }
  }
}

<template>
  <div 
    ref="header" 
    class="animate__animated" 
    :class="{animate__slideInLeft:header_Animate}">
  </div>
</template>

这样就可以控制当dom元素滚动到可视区的时候，给他添加动画样式了。