Javascript“無限”滾動有限內容？

Question

我有很多內容要在網站上顯示，這樣我需要使用“無限”滾動解決方案，當用戶滾動到當前加載內容的末尾時加載內容。 但是，我確切知道有多少數據，我希望用戶對此有所了解。 我不喜歡滾動條使得它看起來幾乎到了內容的末尾，然后突然加載更多內容並且拇指/滑塊位於滾動軌道的中間並且更窄。

我計划的解決方案是在當前內容很大但是為空的情況下創建一個div，然后在加載更多內容時縮小它。 有更好的想法嗎？

Answer 1

當您設計UI元素時，首先要問的是您希望最終用戶實際體驗到什么。 你的解決方案會使它看起來像還有大量的數據（如果它是舊的/存檔的東西，它可能與用戶無關）。 這可能會讓用戶完全不閱讀內容，因為它看起來太長了。

問題是滾動條不是為支持擴展內容而設計的 。 正如你所指出的那樣，這些內容具有欺騙性。 您可以設計一個全新的滾動功能，提供完整的信息

1. 加載數據的長度
2. 可用的卸載數據的長度
3. 如果下載存檔數據，則可能需要單獨指示加載數據的哪個部分是當前數據

帶有綠色背景的彩色滾動條指示加載的內容和當前，黃色部分指示加載的內容但舊數據，以及紅色部分指示可以在用戶滾動時下載的內容將很好地完成此操作。

Answer 2

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

然后，我使用的過程非常類似於橫向滾動視頻游戲中使用的過程，您只能在屏幕上繪制可見的內容，或者僅繪制可見區域附近的內容。 我利用航點來跟蹤用戶滾動到的位置，然后刷新可見內容並使用jquery scrollto功能將用戶保持在他們正在查看的相同位置。 因此，在任何一點上，只有大約一頁的內容被“顯示”在當前觀看區域的上方或下方。

我應該注意到所有“內容”實際上已經在客戶端的系統上，所以下載不是問題。 對我來說問題是“內容”是一個龐大的DOM結構，如果我試圖一次性處理它，最終會大大減慢客戶端系統的速度。 所以我一次只創建和顯示它的一部分。

如果您決定抓住滾動條並將其拖動到內容的底部，則會導致屏幕刷新和不良，從而導致一些不穩定。 如果我找到更好的東西，我會更新。

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

Answer 3

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

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