防止 DIV 在 DOM 内容更改时滚动答案

【问题标题】：Prevent DIV from scrolling on DOM content change防止 DIV 在 DOM 内容更改时滚动
【发布时间】：2015-02-18 21:27:27
【问题描述】：

我正在使用 Node-Webkit 编写一个文档阅读应用程序。文档可以长达数百页，并且界面允许将文档打开到特定章节。显示初始章节后，我想异步加载本书的其余部分。因为我不知道读者会往哪个方向滚动，所以我的策略是在初始章节之前和之后交替加载章节：

加载第 x 章 -> 加载第 x-1 章 -> 加载第 x+1 章 -> 加载 x-2 -> 加载 x+2 ...

我在包含 div 元素中显示这本书，每个章节都是容器中的一个 div。我正在使用 jquery .before() 和 .after() 在获取时插入每一章。

我的问题是，当我在本书前面添加章节时，浏览器会自动向上滚动。因此，如果我从第 10 章开始，浏览器会在我添加第 9 章时向上滚动，然后再次添加第 8 章等等。

该问题的一个（不令人满意的）解决方案是为每个章节制作一个锚标记并存储加载的第一章的 id。然后在获取每一章之后，运行代码：

window.location.href = #originalChapter

在浏览器视口中保留初始章节。当然，这样做的问题是阅读器在加载书的其余部分时无法滚动。

理想情况下，我想禁用滚动，加载一章，然后重新启用，直到获取下一章。到目前为止，我无法弄清楚如何做到这一点。

【问题讨论】：

请看一下这个SO question。我认为 Zougen Moriver 的答案是有效的。它实现了滚动停止。
谢谢，但这似乎只用于处理用户界面启动的滚动事件——鼠标、箭头键等。在我的案例中，导致滚动的 DOM 更改会在加载初始章节后异步触发。我想要做的是在后台加载章节时保持 UI 响应。
所以这确实是您需要解决的唯一prepend 操作。
这是正确的 - 窗口不会在 .after 上滚动。今天晚些时候我会试试你的解决方案。谢谢。
stackoverflow.com/users/522877/wex 回答几乎对我有用，它确实让我走上了正轨。不同之处在于 scrollTop() 不适用于缓冲区容器。 jquery.position() 可以解决问题。所以： $container.scrollTop(buffNewHight - buffOldHigh - $buff.position().top);

【解决方案1】：

在我看来，简单的解决方案是在 DOM 中没有元素，直到它们被加载。用户将无法滚动，因为没有要滚动到的内容。然后，只需在添加元素时保留视口即可。

获取滚动容器的初始位置和溢出容器的高度：

var scrollTop = $scroll.scrollTop(),
    height    = $container.height();

并在您prepend 新元素时使用它们来保留视口。进行append 操作时，您无需执行任何操作。

var newHeight    = $container.height(),
    newScrollTop = scrollTop + newHeight - height;
$scroll.scrollTop(newScrollTop);

【讨论】：

【解决方案2】：

如果您从锚点 (<a/>) 标记的点击处理程序更新 DOM，请确保从回调函数返回 false。

【讨论】：