如何使用Javascript获得已移动元素的新偏移量？

Question

我有一个html数据表，一行中的每个项目都有一个list_position字段，可以对其进行更改，然后所有项目将重新排序以匹配该项目的更改。

如果我的列表很长，并且将list_position值从1更改为1000，我希望浏览器在列表重新排序后自动向下滚动到该项目。

目前，使用此代码，我可以滚动到项目的初始位置，而不是当前位置。

reorder: function (item, order, e) {

    // reorder stuff ...

    target = $(e.target).closest('tr');

    this.scrollTo(target);
},


scrollTo: function (target) {

    $('html,body').animate({
        scrollTop: target.offset().top - 60
    }, 1000);

    return false;
}

Answer 1

如果仅移动元素，则其位置可能尚未在DOM中得到反映。 您可以使用的一种技巧是，等待使用setTimeout （超时值为0重新计算浏览器的布局。

所以代替this.scrollTo(target); ，请尝试使用：

setTimeout(function() {
    this.scrollTo(target);
}, 0);

有关此方法为何起作用以及何时有用的更多信息，请参见此堆栈溢出问题 。

---

编辑：感谢Bill Criswell指出了Vue.nextTick函数 ，这是一种等待DOM更新的更语义的方法（因为无论如何您已经在使用Vue.js库）。 使用Vue.nextTick ，您的代码将变为以下内容：

Vue.nextTick(function() {
    this.scrollTo(target);
});