在scroll事件上使用requestAnimationFrame的Javascript

Question

我使用的时候有一个问题window.requestAnimationFrame上scroll的事件.

我想继续DIV使用CSS transform:translate3D

document.getElementById("content").addEventListener("scroll", function(){

var getScroll = this.scrollTop * 1.2;

function repeatOften() {

    document.getElementById("moveable").style.transform = 
        "translate3D(0," + getScroll + "px, 0)";
    requestAnimationFrame(repeatOften);

}

requestAnimationFrame(repeatOften); 

});

检查这个小提琴:https://jsfiddle.net/tcayv8dp/

为什么这个动画不能顺利运行？

我的代码出了什么问题？

谢谢..... ..

Answer 1

动画对我来说似乎很顺利.

但是,您不应该requestAnimationFrame在函数内部调用,因为这些调用将继续无休止地运行.

这就是我改进代码的方法:

// define the function outside the onscroll function so it doesn't get redefined
var getScroll;
function repeatOften() {
    // use translateY instead of translate3D
    document.getElementById("moveable").style.transform = "translateY(" + getScroll + "px)";
};

document.getElementById("content").addEventListener("scroll", function(){

    getScroll = this.scrollTop * 1.2;
    requestAnimationFrame(repeatOften);

});