Javascript「無限」滾動有限內容？

Question

我有很多內容要顯示在網站上，因此我需要使用「無限」滾動解決方案，在用戶滾動到當前加載內容的末尾時加載內容。但是，我確切知道有多少數據，我希望用戶對此有一些瞭解。我不喜歡滾動條如何使它看起來接近內容的末尾，然後突然加載更多內容，並且滑動條位於滾動軌道的中間並且更窄。

我的計劃解決方案是在當前巨大但空的內容之後創建一個div，然後在我加載更多內容時將其縮小。任何更好的想法？

Answer 1

我最終的解決方案是在div中創建一個具有滾動條的表。我將表格的高度設置爲內容總量的高度，並將內容部分的第一行設置爲高度，而下一行是當前正在查看的內容。

然後，我使用了一個類似於橫向滾動視頻遊戲中使用的過程，在這種過程中，只繪製屏幕上可見的內容，或者只繪製可見區域內可見的內容。我利用航點來跟蹤用戶滾動到的位置，然後刷新可見內容並使用jQuery滾動功能將用戶保留在他們正在查看的同一位置。因此，無論何時，只有大約一頁的內容在當前查看區域的上方或下方「顯示」。

我應該注意，所有的「內容」實際上已經在客戶端的系統上，所以下載不是問題。對我而言，問題在於「內容」是一個巨大的DOM結構，如果我試圖一次處理所有內容，最終會嚴重降低客戶端系統的速度。所以我一次只創建並顯示它的一部分。

如果您決定抓取並拖動滾動條到內容的底部，會導致屏幕刷新和不良。如果我找出更好的東西，我會更新它。

UPDATE 我記錄如何做到這一點在我的網站：http://0xdabbad00.com/2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/

Answer 2

當您設計一個UI元素時，您首先要問的是您想要最終用戶實際體驗的內容。你的解決方案將使它看起來像那裏還沒有那麼多數據（並且如果它是較舊的/歸檔的東西，它可能與用戶無關）。這可能會導致用戶無法閱讀內容，因爲它看起來太長。

問題是滾動條未設計爲以支持擴展內容。正如你所指出的那樣，這是欺騙性的內容。你可以設計一個全新的滾動功能，它提供了完整的信息

1. 加載數據的長度
2. 卸載數據的可用
3. 如果你下載的存檔數據的長度，你可能要單獨指出哪一部分的加載的數據是最新的數據

有色滾動條綠色背景說明什麼是加載和電流，黃色部分表示什麼加載，但舊數據，以及紅色部分表示什麼可以下載的用戶SCR olls會做得很好。

Answer 3

您可以在最大文檔的最後插入一個不起眼的字符（比如15k像素），以便滾動條能夠準確反映頁面的深度，如果這就是您的意思。像這樣的東西...

document.write('<div style="Position:Absolute; Left:0px; Top:15000px;";>.</div>');