Javascript 如何在页面上的特定滚动位置启动功能？

我正在试验下面的代码，其中图像在画布中翻转

如果我把画布放在我的页面中间，我想知道是否有一种方法，只有当浏览者到达页面的特定部分时，才能使图像翻转过来

现在，从外观上看，当你向下滚动时，图像开始在页面顶部的右侧翻转。当您到达实际画布所在的页面中间时，图像已经完成翻转，并在最后一帧停止

我假设我必须将函数设置为仅在用户在Y轴上滚动到特定数量的像素后触发？最好的方法是什么

请参阅下面的代码

谢谢

var images=newarray（）；
var currentLocation=0；
var totalImages=200；
对于（变量i=1；i=（totalImages-1））currentLocation=（totalImages-1）；
如果（newLocation==null）{//if设置，我们已经在等待绘制
请求动画帧（setImage）；
}
newLocation=当前位置；
});
函数setImage（）{
if（图像[新位置]）{
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.drawImage（图像[newLocation]，0,0,1000,1000）；
}
newLocation=null；//因此节流器知道我们可以再次绘制
}
}
图像[0]。onload=function（）{
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.drawImage（图像[currentLocation]，0,0,1000,1000）；
鼠标轮（）；
};
一旦浏览者进入页面的特定部分，您可以使用

因此，您必须检测视口中的元素，在本例中为画布

要做到这一点，你有多种方法

通过使用Observer-API

const元素=document.querySelector（“#后台”）
const Ob=新的IntersectionObserver（（条目）=>{
如果（条目[0]。相交比率=window.pageYOffset&&
（顶部+高度）您可以使用
onscrol
事件并使用
窗口。滚动
以获取已滚动的数量我该如何具体执行？是否有办法在HTML中我放置在my前面的某个id标记处触发事件？@AksJacoves它不是onscrol->onscroll更正，事件是
onscroll
并且没有t
onscroll
。您可以将此事件添加到文档中，例如：
document.addEventListener（'onscroll'，function…'）
，每当您听到页面上的滚动时，就会调用该函数。在该函数中，您可以检查从顶部到用户所在位置的距离，并检查从元素到顶部的距离是否相同
const element = document.querySelector("#background")
const Ob = new IntersectionObserver((entries) => {
    if (entries[0].intersectionRatio <= 0) {
        // Not in the viewport      
    } else {
        // In the viewport 
        // You're code here         
    }
});
Ob.observe(element);

function elementInViewport(el) {
        var top = el.offsetTop
        var height = el.offsetHeight;
      
        while(el.offsetParent) {
          el = el.offsetParent;
          top += el.offsetTop;
        }
      
        return (
          top >= window.pageYOffset &&
          (top + height) <= (window.pageYOffset + window.innerHeight)
        );
      }