Wie fange ich atrr transform translatex Wert?

Question

Ich habe Div, die einige Attribute Stil hat.

<div class="js__scroll__canvas" style="width: 10054px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px); height: 521px;"> 

Another Plugin js Veränderungen verwandeln: translate (0px, 0px) Wert (fett) - so x-Position.

Ich versuche, diese Wertänderung zu fangen.

var currentPos = parseInt($(".scroll-container .js__scroll__canvas").attr('style','transform').split(',')[4]); 
$(document).on('change', currentPos , function() { 
    alert("Handler for .change() called."); 
}); 

Aber nichts. Ich versuche, currentPos Wert auszugeben, aber nichts zurückgibt, nicht null oder Array oder irgendetwas anderes.

Ich sehe ungewöhnliche Struktur des Stils attr - transform: translate(0px, 0px) translateZ(0px);. Kann das ein Problem sein?

Hilf mir bitte!

Answer 1

Ich glaube, Sie .css nicht .attr wollen:

var currentPos = parseInt($(".scroll-container .js__scroll__canvas").css('transform').split(',')[4]) 

Der Code, den Sie den Stil-Attribut auf "transform" würde gesetzt haben:

.attr('style','transform') 

Auch das wird nicht funktionieren:

$(document).on('change', currentPos , function() { 

Das zweite Argument zu on sollte ein JQuery-Selektor sein, keine Nummer. Versuchen Sie folgendes:

var element = $(".scroll-container .js__scroll__canvas"); 
var currentPos = parseInt(element.css('transform').split(',')[4]); 
element.on('change', function() { 
    var newPos = parseInt(element.css('transform').split(',')[4]); 

    if(currentPos != newPos) { 
     currentPos = newPos; 
     alert("It changed!"); 
    } 
});