Javascript“无限”滚动有限内容?

我有很多内容要在网站上显示,这样我就需要使用“无限”滚动解决方案,当用户滚动到当前加载内容的末尾时加载内容。 但是,我确切知道有多少数据,我希望用户对此有所了解。 我不喜欢滚动条如何使它看起来几乎到了内容的末尾,然后突然加载更多内容并且拇指/滑块位于滚动轨道的中间并且更窄。

我计划的解决方案是在当前内容很大但是空的之后制作div,然后在加载更多内容时缩小它。 还有更好的想法?

当您设计UI元素时,您首先要问的是您希望最终用户实际体验到什么。 你的解决方案会使它看起来像还有大量的数据(如果它是旧的/存档的东西,它可能与用户无关)。 这可能会让用户完全没有阅读内容,因为它看起来太长了。

问题是滚动条不是为支持扩展内容而设计的 。 正如你所指出的那样,这些内容具有欺骗性。 您可以设计一个全新的滚动function,提供完整的信息

  1. 加载数据的长度
  2. 可用的卸载数据的长度
  3. 如果下载存档数据,则可能需要单独指示加载数据的哪个部分是当前数据

带有绿色背景的彩色滚动条指示加载的内容和当前状态,黄色部分指示加载的内容但是较旧的数据,以及指示可以在用户滚动时下载的内容的红色部分可以很好地完成此操作。

我的最终解决方案是在div中创建一个包含滚动条的表。 我将表格的高度设置为内容总量的高度,将第一行设置为未被查看的内容部分的高度,下一行是当前正在查看的内容。

然后,我使用的过程非常类似于侧滚动video游戏中使用的过程,其中您只能绘制屏幕上可见的内容,或者仅绘制可见区域附近的内容。 我利用航点来跟踪用户滚动到的位置,然后刷新可见内容并使用jquery scrolltofunction将用户保持在他们正在查看的相同位置。 因此,在任何一点上,只有大约一页的内容被“显示”在当前观看区域的上方或下方。

我应该注意到所有“内容”实际上已经存在于客户端系统中,因此下载不是问题。 对我来说,问题是“内容”是一个庞大的DOM结构,如果我试图立即处理它,最终会大大减慢客户端系统的速度。 所以我一次只创建和显示它的一部分。

如果您决定抓取并将滚动条拖动到内容的底部,则会导致屏幕刷新和不良,从而导致一些不稳定。 如果我找到更好的东西,我会更新这个。

更新我在我的网站上记录了如何做到这一点:http: //0xdabbad00.com/2012/11/25/icebuddha-scrolling-javascript-infinite-scrolling-in-a-finite-area/

您可以在最大文档的最末端插入一个不显眼的字符(比如15k像素),这样滚动条就能准确反映页面的深度,如果这就是您的意思。 这样的东西……

  document.write('
.
');