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

Question

我有一个 html table 数据，一行中的每个项目都有一个可以更改的 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);

有关此功能为何有效以及何时有用的更多信息，请参阅 this Stack Overflow question。

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

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

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

How can I get the new offset of a moved element using Javascript?

javascript

jquery

vue.js