10

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

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

你可以在谷歌阅读器中找到这种效果，当你向下滚动到给定提要中的最后一篇文章时，谷歌请求并以透明的方式显示新文章，但我不知道它们是如何实现的。

顺便说一句，现在我正在使用YUI 数据表

4

7 回答 7

4

谢谢您的回答。这是我的最终工作代码（受 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 组件的完整集成:)

于 2008-10-19T17:26:12.237 回答
2

我不熟悉您正在使用的特定元素，但为了在全尺寸窗口上实现这一点，您可以执行以下操作：

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

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

于 2008-10-19T16:23:50.350 回答
2

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

于 2008-10-19T16:50:20.687 回答
1

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

于 2010-07-22T21:36:23.480 回答
0

我今天在阅读 Firebug 中的 DOM 属性时注意到一个属性，称为scrollY（在 Firebug 中的 DOM 选项卡下转到content> scrollY），它似乎是在窗口上滚动的剩余像素数量。试试看这是否也是为可滚动元素创建的。然后就可以使用 Yuval 的函数来加载新数据了。

于 2008-10-19T16:28:20.387 回答
0

伊克。不是无限滚动的忠实粉丝；它打破了人们对 Web 如何工作的一些关键假设。请保证您只会在以下条件下实施它：

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

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

3) 您正在为盲人和禁用 JavaScript 浏览 Web 的人提供一个有效的后备方案（嘿，又是那个漂亮的长桌）。

于 2008-10-19T22:58:34.420 回答
0

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

YUI 文档没有针对这种情况的具体示例，但确实向您展示了如何处理generateRequest 返回的数据

于 2008-11-12T11:53:12.560 回答