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>');