Question

我有div，它有一些属性风格。

<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;">

另一个插件js更改变换：translate（ 0px ，0px）值（粗体） - 所以x位置。

我试图抓住这个价值变化。

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

但没有。我尝试输出currentPos值，但没有返回，不返回null，数组或其他任何内容。

我看到风格attr变换的异常结构 - transform: translate(0px, 0px) translateZ(0px);。可能有问题吗？

请帮帮我！

Answer 1

我认为您希望.css不是.attr：

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

您拥有的代码会将样式属性设置为"transform"：

.attr('style','transform')

此外，这不起作用：

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

on的第二个参数应该是JQuery选择器，而不是数字。试试这个：

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!");
    }
});

如何捕捉atrr变换translatex值？

1 个答案: