是否有任何 javascript 库可以在某个元素在浏览器 Canvas 中可见时立即为我提供自定义事件?
基本思想是,一旦列表中的最后一个元素在屏幕上可见,我想加载接下来的 10 个元素,这样用户就不需要单击“下一页”按钮。 要实现这一点,在显示最后一个元素时立即触发的 onBecomesVisible 事件将很方便。有这样的东西吗?
Slashdot以这种方式加载首页。
最佳答案
您可以使用 jQuery 编写自己的简单插件。
$.belowViewport = function(elem){
var port = $(window).scrollTop() + $(window).height();
return port <= $(elem).offset().top;
}
$.fn.onBecomeVisible = function( fn ){
var obj = this;
$(window).scroll( function() {
obj.each( function() {
if(!$.belowViewport(this) && !$(this).data('scrollEventFired')){
$(this).data('scrollEventFired', true);
fn(this);
}
});
});
return this;
}
然后像这样使用它
$('.elements:last').onBecomeVisible( function(elem){ loadNewElems(); } );
脚本会将 fn 绑定(bind)到每个匹配的元素。当任何匹配的元素滚动到 View 中时,将触发该函数。该函数还将传递触发事件的元素。
请注意,您不能使用 live 绑定(bind)此事件,因此您必须在添加新元素后重新绑定(bind)它(假设您也想在最后一个元素上绑定(bind)该事件。)。
编辑
我在这里错了, :visible 不会返回元素是否在视口(viewport)中。但是我已经编辑了源代码,所以它现在会检查元素是否在视口(viewport)中。该函数检查元素是否在视口(viewport)下方,我们假设如果它不在视口(viewport)下方,则它已滚动到 View 中,我们应该执行该函数。
编辑2
在 google chrome 1.0、firefox 3.0.10 和 IE7 中对此进行了测试
关于javascript - onBecomesVisible 在 Javascript 中用于无点击分页?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/839567/