HTML表中的“无休止滚动”效果[关闭]

谢谢你的回答。这是我最后的工作代码(灵感来自格雷格和 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本质上是“滚动了多少像素”。 我想把这个应用到你正在工作的桌子上就可以了。

我刚刚在谷歌上找到了这篇文章: Implementing Dynamic Scroll with Ajax, JavaScript, and XML . 这似乎是一个彻底的解释。

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

我在阅读Firebug中的DOM属性时注意到一个属性 scrollY (在Dom选项卡下的Firebug中,转到 content gt; 斯克洛利 )它似乎是窗口上滚动的剩余像素量。请尝试查看是否也为可滚动元素创建了此项。然后可以使用yuval的函数加载新数据。

点击。不太喜欢无休止的滚动;它打破了人们对网络工作方式的一些关键假设。请承诺您仅在以下条件下执行:

1)你不能用它来代替一个完美的页面,这个页面可以将所有内容加载到一个漂亮的长表中,并允许用户使用ctrl-f在页面内搜索出现什么时间条纹。

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

3)您为盲人和禁用javascript浏览网页的人提供了一个工作回退(嘿,又有一个不错的长桌)。

如果你用的是YUI,它有一个 tableScrollEvent 当表滚动时会被激发。将它与DataTable的GenerateRequest函数结合起来,您可以通过观察 TableScrollEvent 并在接近数据集末尾时启动请求。

Yui医生没有这个案例的具体例子,但确实向你展示了 how to handle the data 由GenerateRequest返回