＆＃8220;无尽的滚动＆＃8221; HTML表格中的效果[关闭]

StackOverflow https://stackoverflow.com/questions/216588

题

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

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

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

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

有帮助吗？

解决方案

感谢您的回答。这是我的最终工作代码（灵感来自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组件：）

其他提示

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

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

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

我刚用Google搜索并找到了这篇文章：使用Ajax实现动态滚动，JavaScript和XML 。这看起来像是一个彻底的解释。

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

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

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

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

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

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

如果你正在使用YUI，它有一个 tableScrollEvent 在表滚动时被触发。将此与dataTable的generateRequest函数结合使用，您可以通过观察 tableScrollEvent 并在接近数据集末尾时启动请求。

YUI doc没有针对此案例的具体示例，但会向您显示如何处理generateRequest返回的数据

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top