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

我正在尝试使用

requestAnimationFrame

在我的Vue应用程序中滚动动画，但它似乎不适用于我编写的内容，我希望在该元素图像上滚动时显示图像

在我的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;
    }

data（）{
返回{
id：未定义，
}
},
方法：{
fancyFunction（）{
const elementToShow=document.queryselectoral（“.scrollPic”）；
element toshow.forEach（element=>{
if（此.isElementViewPort（元素））{
控制台日志（“正确”）
element.classList.add（'is-visible'）
}
})
},
isELementInViewPort（el）{
const rect=el.getBoundingClientRect（）；
console.log（rect）
返回(
（rect.top=0）||
（rect.bottom>=（window.innerHeight | | | document.documentElement.clientHeight）&&rect.top=0&&rect.bottom您创建的
回调只会被调用一次，对吗？然后您的
fancyFunction
也只会被调用一次。如果您希望启动循环，您需要调用
requestAnimationFrame（this.fancyFunction）
从内部
this.fancyFunction
。通过
this.id=window.requestAnimationFrame（this.fancyFunction）