Javascript Verwendung von requestAnimationFrame auf scroll-Ereignis

ich habe ein problem bei der Verwendung von window.requestAnimationFrame auf scroll Veranstaltung.

ich mich bewegen möchte DIV mit 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); 

});

überprüfen Sie diese Geige : https://jsfiddle.net/tcayv8dp/

warum diese animation nicht flüssig läuft?

was ist falsch an meinem code?

Dank….. . .

InformationsquelleAutor Ching Ching | 2016-03-15



One Reply
  1. 5

    Die animation scheint glatt zu mir.

    Jedoch sollte man sich nicht aufrufen requestAnimationFrame innerhalb der Funktion als diejenigen, die Anrufe laufen endlos.

    Dies ist, wie ich es verbessern Sie Ihre code:

    //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);
    
    });

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.