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

时间:2015-10-01 01:42:33

标签: javascript jquery vue.js

我有一个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;
}

1 个答案:

答案 0 :(得分:1)

如果您刚刚移动元素,其位置可能尚未反映在DOM中。您可以使用的一个技巧是等到浏览器的布局重新计算后使用 /public_html/.htaccess: Invalid command 's', perhaps misspelled or defined by a module not included in the server configuration 并超时setTimeout

因此,请尝试使用:

而不是0
this.scrollTo(target);

有关其工作原理以及何时有用的详细信息,请参阅this Stack Overflow question

编辑:感谢Bill Criswell指出Vue.nextTick function,这是一种等待DOM更新的更加语义的方式(因为你已经在使用Vue.js库了)。使用setTimeout(function() { this.scrollTo(target); }, 0); ,您的代码将变为以下内容:

Vue.nextTick