javascript - Javascript 中的无限滚动条

Question

我正在编写一个图书查看器，它可以在用户向下滚动到内容时动态加载内容。我遇到的第一个问题是如何设置滚动条。由于我们只在数据库中存储没有大小信息的段落，因此我只能猜测文档的长度。基于这样的猜测，我可能想创建一个显示为 10,000 像素长并根据需要加载段落的可滚动窗口。

我能想到的最简单的方法是实际创建一个 10,000 像素长的 DIV，并将嵌入的 div 绝对定位在显示我的内容的滚动位置。

有没有一种方法可以完全控制 Javascript 下的滚动条(设置它的最小值、最大值、位置、相对拇指大小)，或者我是按照上面提到的简单方法还是有其他方法来做到这一点？

我正在使用 ExtJS 框架，但它似乎没有提供任何直接帮助，尽管 V4 确实包含一个无限网格。

Answer 1

这个问题的其他答案只是在用户到达底部时扩展了内容，这不是我想要的。我需要显示一个全尺寸但人口稀少的可滚动区域。我提出的解决方案非常简单:

我创建了一个可滚动的 DIV(称之为书)，书中的每个段落都有一组内部 DIV。我需要按段落来做，因为这在我们的应用程序中有特殊含义，否则，您可能会按页来做。段落 DIV 有一个默认大小，它基于对它们有多大的猜测。

当滚动书籍 DIV 时，javascript 计算现在可见的段落 DIV。可见但未填充的那些捆绑在一起。然后使用 Web 服务来填充所需的段落 DIV 并准确调整它们的大小。

我使用的算法捆绑了一些周围的(不可见的)段落以提供一些预读和分块效率。屏幕更新后，延迟加载器会阅读更多段落，以进一步帮助平滑滚动。

事实证明这也很简单。困难的工作在于分块算法和添加惰性阅读器。