如何使用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);
});