"无休止滚动”;HTML表中的效果

"Endless scrolling" effect in a HTML table

本文关键字：quot 无休止 滚动 HTML      更新时间：2023-09-26

我正在网页中显示一个滚动数据表。这个表有几千个动态行，所以它是从服务器（通过AJAX）加载的。

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

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

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

感谢您的回答。这是我的最后一个工作代码（受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分页器，以实现与YUI组件的完全集成：）

我不熟悉您正在使用的特定元素，但要在全尺寸窗口上实现此功能，可以执行以下操作：

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

其中scrollTop本质上是"滚动了多少像素"。我想把这个应用到你正在工作的桌子上就可以了。

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

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

Ick。不太喜欢无休止的滚动；它打破了人们对网络工作方式的一些关键假设。请承诺您只会在以下条件下实施：

1） 你不是用它来代替一个完美的页面，这个页面将所有内容加载到一个漂亮的长表中，并允许用户使用Ctrl-F在页面内部搜索Fringe出现的时间。

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

3） 您正在为盲人和禁用JavaScript浏览Web的人提供一个工作回退（嘿，又有一个很好的长表）。

如果您使用YUI，它有一个tableScrollEvent，当表滚动时会触发它。再加上dataTable的generateRequest函数，您可以通过观察tableScrollEvent并在接近数据集末尾时启动请求来实现无休止的滚动。

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

相关文章：