Javascript中的无限滚动条 [英] Infinite scrollbar in Javascript

问题描述

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

I am writing a book viewer that dynamically loads content as the user scrolls down to it. The first problem I'm having is how to set up the scrollbar. Since we only store paragraphs in our database with no size information, I can only guess how long the document is. Based upon such a guess, I may want to create a scrollable window that appears 10,000 pixels long and loads paragraphs as needed.

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

The simplest way I can think is to actually create a DIV that is 10,000 pixels long and absolutely position an embedded div at the scroll position showing my content.

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

Is there a way to totally control the scrollbar under Javascript (setting its min, max, position, relative thumb size) or do I go the simple way mentioned above or is there another way to do this?

我使用的是ExtJS框架但是它似乎没有提供任何直接的帮助，虽然V4确实包含无限网格。

I am using ExtJS framework but it does not seem to offer any direct help there, though V4 does include an infinite grid.

推荐答案

这个问题的其他答案只是当用户到达底部时扩展内容，这不是我追求的。我需要显示一个完整大小但人烟稀少的可滚动区域。我提出的解决方案非常简单：

The other answers to this question simply extended the content as the user reached the bottom, this is not what I was after. I need to display a fully sized, but sparsely populated, scrollable region. The solution I came up with was pretty simple:

我为书中的每个段落创建了一个可滚动的DIV（称之为书），其中包含一组内部DIV。我需要逐段执行，因为这在我们的应用程序中具有特殊含义，否则，您可能会按页面执行此操作。段落DIV的默认大小基于对它们有多大的猜测。

I created a scrollable DIV (call it book) with a set of inner DIVs for each paragraph in the book. I need to do it by paragraph as this has special meaning in our application, otherwise, you'd probably do it by page. The paragraph DIVs have a default size based upon a guess of how big they are.

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

When the book DIV is scrolled, the javascript calculates which paragraph DIVs are now visible. Those that are visible but are not populated are bundled together. A web service is then used to populate the required paragraph DIVs and accurately size them.

我使用的算法捆绑了一些周围（非不可见）段落以给出一些读取提前和分块效率。一旦屏幕更新，懒惰的加载程序会读取更多段落以进一步帮助平滑滚动。

The algorithm I use bundles some surrounding (not not-visible) paragraphs to give some read ahead and chunking efficiencies. A lazy loader reads further paragraphs once the screen has been updated to further aid smooth scrolling.

事实证明这非常简单。艰苦的工作是在分块算法中添加一个懒惰的读者。

This turned out too be very simple. The hard work is in the chunking algorithms and adding a lazy reader.

这篇关于Javascript中的无限滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！