防止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。