如果元素在屏幕上，则触发 requestAnimationFrame

Question

对于我的滚动网站，我想使用 requestAnimationFrame 创建一个 animation。如果元素通过滚动在屏幕上，则必须触发 requestAnimationFrame。 我对此有疑问。 只有当我刷新页面并且元素在屏幕上时，requestAnimationFrame 才会运行。 如果我加载页面并向下滚动，则 requestAnimationFrame 未运行。

在我的代码下面

window.addEventListener('scroll', ()=>{
    var contentPosition = element.getBoundingClientRect().top;
var screenPosition = window.innerHeight;
if(contentPosition < screenPosition){
    requestAnimationFrame(run);
}
                    
});
var start_time = new Date().getTime();
function run(){
    var time = new Date().getTime() - start_time;
var result = easeInOutQuart(time, from, to - from, duration);
if(time <= duration){
    requestAnimationFrame(run);
    element.style.left = result+"px";
};
}

function easeInOutQuart(t, b, c, d){
    if((t /= d / 2) < 1){
        return c / 2 * t * t * t * t + b;
}else{
    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
}

我用 console.log 测试了我的代码，这工作正常

window.addEventListener('scroll', ()=>{
    var contentPosition = element.getBoundingClientRect().top;
var screenPosition = window.innerHeight;
if(contentPosition < screenPosition){
    //requestAnimationFrame(run);
        console.log('trigger');
}
                    
});

Answer 1

您在调用run之前很久就定义了start_time （可能）。 所以当run最终被调用时，它会认为它已经在超过预期持续时间的情况下进行动画处理，并且什么都不做。

移动

start_time = new Date().getTime();

在里面

if(contentPosition < screenPosition){

堵塞。

然而，您将面临一个新问题：如果用户在 animation 期间继续滚动，计时器将被重置并且 animation 将再次开始，可能有许多并行调用。
为避免这种情况，您需要在同一块中删除事件侦听器（使用removeEventListener()或AbortSignal ）。

但无论如何，最好还是使用IntersectionObserver而不是监听所有scroll事件。