尝试requestAnimationFrame但它在滚动时没有响应

Question

我正在尝试使用requestAnimationFrame在Vue应用程序中滚动动画，但是我写的内容似乎无效，我想在该元素上滚动 Image 时显示 em>图片

我的Vue组件中的

就是这样

    data(){
      return {
         id: undefined,
       }
    },
    methods: {
      fancyFunction() {
          const elementToShow = document.querySelectorAll(".scrollPic");
          elementToShow.forEach(element => {
              if(this.isELementInViewPort(element)) {
                  console.log("correct")
                  element.classList.add('is-visible')
              }
          })
      },
      isELementInViewPort(el) {
        const rect = el.getBoundingClientRect();
        console.log(rect)
        return (
            (rect.top <= 0 && rect.bottom >= 0) ||
            (rect.bottom >= ( window.innerHeight || document.documentElement.clientHeight) && rect.top <= (window.innerHeight || document.documentElement.clientHeight)) ||
            (rect.top >= 0 && rect.bottom <= ( window.innerHeight || document.documentElement.clientHeight))
        )
      }
    },
    }
    created() {
        this.id = window.requestAnimationFrame(
            this.fancyFunction
        )
    },
    destroyed() {
          window.cancelAnimationFrame(this.id);
          this.id = undefined;
    }

为什么我使用id？因为我希望该功能 requestAnimationFrame仅在该组件上起作用，并且在该组件离开后，我破坏该功能无法运行每时每刻 ， 当我console.log()不看滚动时，它只滚动一次 我上面的代码有什么问题？