防止DIV滚动DOM内容更改 [英] Prevent DIV from scrolling on DOM content change

问题描述

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

I am writing a document reading application using Node-Webkit. A document can be hundreds of pages long and the interface allows opening the document to a specific chapter. Once the initial chapter is displayed, I want to load the rest of the book asynchronously. Since I don't know what direction the reader will scroll, my strategy is to alternately load chapters before and then after the initial chapter:

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

load chapter x -> load chapter x-1 -> load chapter x+1 -> load x-2 -> load x+2 ...

我在包含div元素中显示书每个章节都是容器内的div。我正在使用jquery .before（）和.after（）来插入每个章节。

I am displaying the book in a containing div element with each chapter being a div within the container. I'm using jquery .before() and .after() to insert each chapter as it is fetched.

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

My problem is that the browser automatically scrolls up when I add chapters earlier in the book. So if I start with chapter 10, the browser scrolls up when I add chapter 9 and again with chapter 8 and so forth.

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

One (unsatisfactory) solution to the problem is to make an anchor tag for each chapter and store the id of the first chapter loaded. Then after each chapter is fetched, runing the code:

window.location.href = #originalChapter

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

keeps the initial chapter in the browser viewport. Of course the problem with that is that the reader cannot scroll while the rest of the book is being loaded.

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

Ideally, I would like to disable scrolling, load a chapter and then re-enable until the next chapter is fetched. I'm so far unable to figure out how to do that.

推荐答案

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

The simple solution in my mind would be to not have the elements in the DOM until they are loaded. The user won't be able to scroll because there won't be content to scroll to. Then, it's just a matter of preserving the viewport when the elements are added.

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

Take the initial position of your scroll container and the height of the overflow container:

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

并在 prepend 新元素。当您执行追加操作时，您无需执行任何操作。

and use them to preserve the viewport when you prepend new elements. You don't have to do anything when you're doing the append operation.

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

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

Here's a quick example: http://jsfiddle.net/Wexcode/tfszaocz/

这篇关于防止DIV滚动DOM内容更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！