有限内容的JavaScript“无限”滚动？

Question

12

我有很多内容要在网页上展示，因此需要使用“无限”滚动的解决方案，当用户向当前加载的内容底部滚动时，会加载更多的内容。然而，我知道有多少数据，希望让用户对此有所了解。我不喜欢滚动条使人感觉快到内容底部了，但突然又加载了更多的内容，导致滑块在滚动轨迹中间，且变窄的情况。

我的计划解决方案是在当前内容后面添加一个巨大但空的div，随着加载更多的内容将其缩小。还有更好的解决方案吗？

- 0xdabbad00

现在有很多这方面的插件，只需要谷歌一下就可以了。通常像Facebook那样实现，当用户滚动到底部时，一个ajax调用会获取接下来的内容并将其发布在页面底部。 - SpYk3HH

10

完全同意。我不喜欢滚动条让人感觉似乎已经接近内容的结尾，然后突然加载更多内容，导致滑块出现在滚动条中间位置且变窄了。 - j08691

1

+1. 我建议查看用户体验以获取更多见解。 - Aamir

或者你可以将滚动的 div 设为较大，overflow:scroll，并在底部保持空白。 - Asad Saeeduddin

关于我的计划解决方案可能存在的一些困惑：我想取出当前包含内容和可调整大小的垂直滚动条的div，并将其末尾用空行（或其他东西）填充，以扩展可滚动内容区域的大小。 - 0xdabbad00

1

为什么不给包含内容的 div 设置一个 min-height，如果内容溢出，它将自动扩展... 这也可以避免在下面调整 div 的大小，是一种纯 CSS 解决方案！ - ahren

3个回答

2

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

然后，我使用了类似于侧向滚动视频游戏中使用的过程，只绘制屏幕上可见的内容或接近可见区域的内容。我利用路标来跟踪用户滚动到哪里，然后刷新可见的内容并使用jquery scroll功能，使用户停留在他们正在查看的同一位置。因此，在任何时候，仅显示当前查看区域上方或下方约一页的内容。

我应该指出，所有“内容”实际上已经在客户端系统中，因此下载不是问题。对我来说，问题在于“内容”是一个巨大的DOM结构，如果我尝试一次性处理所有内容，它最终会严重减慢客户端系统的速度。因此，我一次只创建和显示其中的一部分。

这确实会导致某些卡顿，因为屏幕被刷新，并且如果您决定抓住并拖动滚动条到内容底部，则会出现错误。如果我想出更好的办法，我会更新此内容。

- 0xdabbad00

我还没有看过你的解决方案，但是因为你自己解决了问题、记录了下来并分享了你的解决方案，所以点个赞！ - Scott

-1

您可以在文档的最后插入一个不显眼的字符（例如在15k像素处），这样滚动条将准确反映页面的深度，如果这就是您的意思。就像这样...

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

- John Citizen

虽然这并不是一个与我最初考虑的方案概念上不同的解决方案，但我决定选择它，因为它通过节省填充垃圾数据和内存来改进我的初始想法。 - 0xdabbad00

不客气...最简单的解决方案总是最好的！ :) - John Citizen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- just.another.programmer · Accepted Answer

当您设计用户界面元素时，首先要考虑的是您希望最终用户实际体验到什么。您的解决方案将使其看起来有大量数据尚未加载（如果是旧的/存档内容，则可能与用户无关）。这可能会让用户完全不想阅读内容，因为它看起来太长了。

问题在于滚动条并没有被设计来支持扩展内容。正如您所指出的那样，对于此类内容来说，它是具有欺骗性的。您可以设计一个全新的滚动功能，提供完整的信息：

使用绿色背景的彩色滚动条表示已加载和当前数据，黄色部分表示已加载但较旧的数据，红色部分表示随着用户滚动可以下载的数据，这样做会非常好。