onBecomes在Javascript中可见,用于无咔嗒声的分页？

Question

是否有任何javascript库,只要某个元素在浏览器画布中可见,它就会为我提供自定义事件？

基本的想法是,一旦列表中的最后一个元素在屏幕上变得可见,我想加载接下来的10个元素,这样用户就不需要点击"下一页"按钮.为了实现这一点,一旦显示最后一个元素就会触发的onBecomesVisible事件将非常方便.有这样的事吗？

Slashdot以这种方式进行首页加载.

Answer 1

你可以使用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绑定到每个匹配的元素.当任何匹配的元素滚动到视图中时,将触发该函数.该函数也将传递哪个元素触发了事件.

请注意,您无法使用实时绑定此事件,因此您必须在添加新元素后重新绑定它(假设您也希望事件也在最后一个元素上).

编辑
我在这里错了,:可见不返回或者视图中没有元素.但是我已经编辑了源代码,因此它现在会检查元素是否在视口中.该函数检查元素是否在视口下方,我们假设如果它不在视口下方,则它已滚动到视图中并且我们应该执行该函数.

EDIT2
在google chrome 1.0,firefox 3.0.10和IE7中测试过