Knockout observable array更新时阻止页面滚动到顶部的问题

为什么push数据后页面会滚到顶部？ #

这个问题我之前也碰到过，大概率是浏览器默认行为在搞鬼，而非Knockout的observableArray.push本身导致的，常见场景有两种：

• 触发LoadEntries的按钮/链接被放在了<form>标签里，点击时会默认触发表单提交（哪怕表单没设action属性），浏览器会悄悄刷新页面，看起来就像是push数据后滚到了顶部。
• 如果用<a>标签触发加载，且它的href设为#或空值，点击时会触发锚点跳转（默认跳转到页面顶部），同样会导致滚动位置重置。

另外一种少见情况：如果列表被if/with这类会触发DOM重新渲染的Knockout绑定包裹，push数据时可能会重新渲染整个列表，DOM结构变化也可能导致滚动位置异常，但这种情况概率远低于默认行为问题。

如何阻止滚动，保持页面位置？ #

针对不同场景，给你几个实用的解决办法：

1. 直接阻止浏览器默认事件

如果用Knockout的click绑定触发加载，有两种方式阻止默认行为：

// 方法1：在click绑定里返回false
<button data-bind="click: function() { LoadEntries(10, 0); return false; }">加载更多</button>

// 方法2：在LoadEntries函数里处理事件参数
function LoadEntries(take, skip, event) {
    if (event) event.preventDefault(); // 拦截默认行为
    vm.entries.push({/* 你的数据结构 */});
}
// 绑定的时候传递event参数
<button data-bind="click: function(data, event) { LoadEntries(10, 0, event); }">加载更多</button>

如果按钮在<form>里，还可以给表单添加阻止提交的逻辑：

<form data-bind="submit: function() { return false; }">
    <button data-bind="click: function() { LoadEntries(10, 0); }">加载更多</button>
</form>

2. 手动保存并恢复滚动位置

如果确实是DOM渲染导致的滚动偏移，可以在push数据前后手动记录、恢复位置：

function LoadEntries(take, skip) {
    // 记录当前滚动位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    // 追加数据到observableArray
    vm.entries.push({/* 你的数据 */});
    
    // 恢复之前的滚动位置
    window.scrollTo(0, scrollTop);
}

3. 优化Knockout列表渲染逻辑

确保列表用foreach直接绑定，避免被if/with这类会触发整段DOM重新渲染的绑定包裹，这样Knockout只会追加新的条目元素，不会影响现有页面布局和滚动位置：

<!-- 推荐写法：直接foreach绑定 -->
<div data-bind="foreach: entries">
    <!-- 单个条目内容 -->
</div>

<!-- 不推荐：if包裹会导致列表整体重新渲染 -->
<div data-bind="if: entries().length > 0">
    <div data-bind="foreach: entries">...</div>
</div>

内容的提问来源于stack exchange，提问作者Raptor