Question

我在网页中显示滚动的数据表。该表有几千个动态行，因此它从服务器加载（通过AJAX）。

用户可以向上和向下滚动，所以我需要的是检测用户何时到达滚动条的末尾（即表格底部的最后一行）请求并显示更多数据。

您可以在Google阅读器中找到此效果，当您向下滚动到给定Feed中的最后一个帖子，google请求并以透明的方式显示新帖子时，但我无法弄清楚他们是如何实现的。

顺便说一下，我现在正在使用YUI Datatable

Answer 1

感谢您的回答。这是我的最终工作代码（受Greg和ajaxian.com启发），它使用了一些jQuery函数并与YUI DataTable一起使用。

$(".yui-dt-bd").scroll(load_more);

function load_more() {              
    if ($(this).scrollend()) {
        alert("SCROLL END REACHED !");
        // TODO load more data
    }
}

$.fn.scrollend = function() {
    return this[0].scrollHeight - this[0].scrollTop - this.height() <= 0;
}

我的下一步是实现我自己的YUI Paginator以实现与YUI组件的完全集成：）

Answer 2

我不熟悉你正在使用的具体元素，但是按顺序要在全尺寸窗口上实现此功能，您可以执行以下操作：

$wnd.onscroll = function() {
    if (($wnd.height - $wnd.scrollTop) < SOME_MARGIN) then doSomething();
};

其中scrollTop基本上是“滚动了多少像素”。我假设将这个应用到您正在使用的表中将完成这项工作。

Answer 3

我刚用Google搜索并找到了这篇文章：Implementing Dynamic Scroll with Ajax, JavaScript, and XML。这看起来像是一个彻底的解释。

Answer 4

你可以看到它仅适用于here YUI。与上面提出的解决方案之一相反，滚动条连续移动，位置和大小反映可视区域的真实大小和位置，当滚动条到达底部时，它不会加载下一批。仅当整个记录的最后一个位于查看区域的底部时，滚动条才会到达底部。当然，这只有在您知道有多少记录的情况下才有效。

Answer 5

我今天在Firebug中读取DOM属性时注意到了一个名为scrollY的属性（在DOM选项卡下的Firebug中转到content＆gt; scrollY），这似乎是留在窗口上滚动的像素数量。尝试查看是否也为可滚动元素创建了这个。然后你可以使用Yuval的函数来加载新数据。

Answer 6

伊克。不是无尽滚动的忠实粉丝;它打破了人们对网络运作方式的一些关键假设。请保证您只能在以下条件下实施：

1）你没有用它来代替一个非常好的页面，它将所有内容加载到一个漂亮的长表中，并让用户使用Ctrl-F在页面内搜索Fringe出现的时间。

2）您不打算在每个滚动数据块的底部插入广告。

3）你正在为盲人和浏览网页的人禁用JavaScript提供工作后备（嘿，还有那个漂亮的长桌）。

Answer 7

如果您正在使用YUI，则表格滚动时会触发tableScrollEvent。将此与dataTable的generateRequest函数结合使用，您可以通过观察tableScrollEvent并在接近数据集末尾时启动请求来实现无限滚动。

YUI文档没有针对此案例的具体示例，但会显示由generateRequest返回的how to handle the data

HTML表格中的“无限滚动”效果

7 个答案: