防止DIV滚动DOM内容更改

Question

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

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

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

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

解决该问题的一种方法（不令人满意）是为每个章节创建一个定位标记，并存储所加载的第一章的ID。 然后在获取每章之后，运行代码：

window.location.href = #originalChapter

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

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

Answer 1

我认为简单的解决方案是在元素被加载之前不将其包含在DOM中。 用户将无法滚动，因为将没有内容可以滚动到。 然后，只需在添加元素时保留视口即可。

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

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

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

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

这是一个简单的示例： http : //jsfiddle.net/Wexcode/tfszaocz/

Answer 2

如果要通过锚点（ <a/> ）的点击处理程序更新DOM，请确保从回调函数返回false。