12

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

我计划的解决方案是在当前内容巨大但为空的内容之后创建一个 div，然后在我加载更多内容时将其缩小。有更好的想法吗？

4

3 回答 3

2

当你设计一个 UI 元素时，你首先要问的是你希望最终用户真正体验到什么。您的解决方案将使它看起来像大量尚未存在的数据（如果它是较旧/存档的东西，它可能与用户无关）。这可能会使用户完全无法阅读内容，因为它看起来太长了。

问题是滚动条不是为支持扩展内容而设计的。正如您所指出的，它对此类内容具有欺骗性。您可以设计一个全新的滚动功能，提供完整的信息

  1. 加载数据的长度
  2. 可用卸载数据的长度
  3. 如果您下载存档数据，您可能需要单独指出加载数据的哪一部分是当前数据

带有绿色背景的彩色滚动条表示已加载和当前，黄色部分表示已加载但较旧的数据，红色部分表示用户滚动时可以下载的内容会很好地做到这一点。

于 2012-11-11T21:24:04.880 回答
2

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

然后，我使用了一个与横向滚动视频游戏中使用的过程非常相似的过程，您只绘制屏幕上可见的内容，或者只绘制可见区域附近的内容。我利用航路点来跟踪用户滚动到的位置，然后刷新可见内容并使用 jquery scrollto 功能将用户保持在他们正在查看的同一位置。因此，在任何时候，只有大约一页的内容会“显示”在当前查看区域的上方或下方。

我应该注意到所有的“内容”实际上已经在客户端的系统上，所以下载不是问题。对我来说，问题是“内容”是一个庞大的 DOM 结构，如果我尝试一次处理所有内容，最终会严重降低客户端系统的速度。所以我一次只创建和显示其中的一部分。

如果您决定抓住滚动条并将其拖动到内容的底部，这确实会导致屏幕刷新时出现一些不稳定和糟糕的情况。如果我想出更好的东西，我会更新这个。

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

于 2012-11-14T08:22:25.640 回答
-1

您可以在最大化文档的最后（例如 15k 像素）插入一个不显眼的字符，以便滚动条准确反映页面的深度（如果这是您的意思）。像这样的……</p> 

 document.write('<div style="Position:Absolute; Left:0px; Top:15000px;";>.</div>');
于 2012-11-11T22:01:48.253 回答