Question

I have problem with scrolling when adding items to observable array. After data are pushed to collection, page scrolls to top.

function LoadEntries(take, skip) {  
  vm.entries.push({...})
};

I found similar problem on one gist, so I used it as example:
https://codepen.io/raptor/pen/qYBVre

Just click on "Read More Entries" and it scrolls to start of page.

Why it happens and how to prevent this?

I want to keep position when reloaded data. Just as it will be for example in Asp.Net on UpdatePanel.

Answer 1

示例位于https://codepen.io/raptor/pen/qYBVre页面滚动回到顶部的原因是click事件正在删除所有元素，然后重新添加一些元素.Knockout更新了删除和添加之间的DOM有一个短暂的时刻，文档的整个长度只是标题部分，并强制滚动重置。

可能有很多选择可以解决这个问题，但这里有两个：

1。更新列表时不要删除现有项目。只需添加/删除/更新受影响的。任何添加和删除当然会改变屏幕的大小，因此滚动位置仍会根据您一次添加/删除的数量以及滚动位置相对于屏幕底部的位置而改变。

2. 在重新填充阵列之前，不要告诉淘汰赛。

//vm.entries.removeAll();
vm.entries().length = 0; //remove elements from the underlying array without triggering overvable notifications
LoadEntries(pageSize, ++page * pageSize);

更改底层数组而不是可观察数组会绕过knockout的更改触发器。当条目重新加载vm.entries.push(...)时，唯一的更新就会发生。在更复杂的场景中，您可能需要手动告诉knockout已经使用vm.entries.valueHasMutated();

对基础数组进行了更改

Knockout observable array - prevent scroll to top when updated

1 个答案: