Javascript 获取正在转换的元素的位置

我试图在另一个具有

overflow:hidden

属性的div中使用CSS3获取正在转换的div的位置

下面是一个JSFIDLE演示：

当尝试使用jQuery的

position（）获取元素时，元素的顶部位置不会更新。top

我不知道为什么会发生这种情况，有人有解决办法吗

---

更新：这不适用于OSX上的Chrome 44，但适用于其他浏览器

玩了一会儿后，我想我有一个答案：

这是一个性能问题 Chrome使用这些资源使动画更加流畅，从而使脚本得到更少的回调调用和更少的位置更新

虽然Firefox使用这些资源来保持这两个位置的更新，但wich使动画不那么流畅，但脚本得到了更多的更新位置

在Chrome中，调用的配置文件也非常不规则（每个位置2到100个调用），而在Firefox中，每个位置的调用不超过4个

在此过程中，我尝试在全局变量中使用本机演算来获得更好的性能：

var position = function() {
    return this.getBoundingClientRect().top - 
        this.offsetParent.getBoundingClientRect().top;
};

并避免使用console.log

var callback = function(){
    var top = position.call(callback.target);
    if(benchmark[top] === undefined){
        benchmark[top] = 0;
    } else {
        benchmark[top] += 1;
    }
};

然后我发现了这种性能差异

如何解决 您可以在此处获得有关JavaScript动画和CSS动画之间差异的更多信息：

因此，在阅读之后，我提出以下解决方案：

用JavaScript实现 您描述的动画非常简单，如下所示：

$('#bar').animate({
    'translate3d': '-2000'
}, {
    step: function (now, fx) {
        console.log(now);
        $(this).css({"transform": "translate3d(0px, " + now + "px, 0px)"});
    },
    duration: 1000,
    easing: 'linear',
    queue: false
},
'linear');

通过这种方式，您将能够处理javascript上每个记号的位置，而不是向CSS询问

---

我希望它能帮上忙。

它似乎在chrome中工作，你在哪个浏览器中得到了什么？我看到每个interval的

控制台。log

输出一个不同的、正确的值。也许更多关于浏览器，等等？我在OSX Chrome 44上。这种类型的东西的行为会因浏览器的不同而有很大的差异。在我看来，在OSX上使用Chrome44的FF39W7很好。似乎可以在Safari和Firefox上使用，我不知道为什么它不能在Chrome上使用……看看这个。