我有一个 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;
}
最佳答案
如果您刚刚移动了该元素,它的位置可能尚未反射(reflect)在 DOM 中。您可以使用的一个技巧是等待,直到使用超时为 0
的 setTimeout
重新计算浏览器的布局。
因此,不要使用 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 - 如何使用 Javascript 获取移动元素的新偏移量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32878195/