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

我正在使用NodeWebKit编写一个文档读取应用程序。一个文档可以有数百页长，界面允许打开文档到特定章节。显示初始章节后，我希望异步加载本书的其余部分。由于我不知道读者将滚动的方向，我的策略是在第一章之前和之后交替加载章节：

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

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

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

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

window.location.href = #originalChapter

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

---

理想情况下，我希望禁用滚动，加载一章，然后重新启用，直到获取下一章。到目前为止，我还不知道如何做到这一点。

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

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

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

并在预先添加新元素时使用它们保留视口。在执行追加操作时，无需执行任何操作

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

---

这里有一个简单的例子：

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

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

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

并在预先添加新元素时使用它们保留视口。在执行追加操作时，无需执行任何操作

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

---

这里有一个简单的例子：

如果您正在从锚标记的单击处理程序更新DOM，请确保从回调函数返回false。

如果您正在从锚标记的单击处理程序更新DOM，请确保从回调函数返回false。

请查看此信息。我认为Zougen Moriver的答案是有效的。它实现了滚动停止。谢谢，但这似乎只处理用户界面启动的滚动事件-鼠标、箭头键等。在我的例子中，导致滚动的DOM更改会在加载初始章节后同步触发。我想做的是在后台加载章节时保持UI的响应性。因此，这实际上是您需要解决的唯一前置操作。这是正确的-窗口不会滚动。之后。今天晚些时候我会试试你的解决方案。非常感谢。这个答案几乎对我有用，它确实让我走上了正轨。区别在于scrollTop不适用于缓冲区容器。jquery.position就是这样。所以：$container.scrollTopbuffNewHight-buffOldHigh-$buff.position.top；请看看这个。我认为Zougen Moriver的答案是有效的。它实现了滚动停止。谢谢，但这似乎只处理用户界面启动的滚动事件-鼠标、箭头键等。在我的例子中，导致滚动的DOM更改会在加载初始章节后同步触发。我想做的是在后台加载章节时保持UI的响应性。因此，这实际上是您需要解决的唯一前置操作。这是正确的-窗口不会滚动。之后。今天晚些时候我会试试你的解决方案。非常感谢。这个答案几乎对我有用，它确实让我走上了正轨。区别在于scrollTop不适用于缓冲区容器。jquery.position就是这样。所以：$container.scrollTopbuffNewHight-buffOldHigh-$buff.position.top；我有完全相同的问题，这是非常好的工作。我会将此标记为已接受的答案，而不是通过滚动窗口进行黑客攻击；在onclick的最后，举例来说：我遇到了完全相同的问题，这非常有效。我会将此标记为已接受的答案，而不是通过滚动窗口进行黑客攻击；在onclick的末尾，示例：