Javascript "infinite"滚动有限内容？

Question

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

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

Answer 1

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

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

1. 加载数据的长度
2. 可用卸载数据的长度
3. 如果下载存档数据，可能需要单独说明加载的数据中哪些部分是当前数据

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