只要某个元素在浏览器画布中可见,是否有任何JavaScript库可以为我提供自定义事件?

基本思想是,只要列表中的最后一个元素在屏幕上可见,我就想加载下一个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绑定到每个匹配的元素。当任何匹配的元素滚动到视图中时,将触发该函数。该函数还将传递触发事件的元素。

请注意,您不能使用live绑定此事件,因此您必须在添加新元素后重新绑定它(假定您也希望事件在最后一个元素上。)。

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

编辑2
在Google Chrome 1.0,Firefox 3.0.10和IE7中对此进行了测试

09-28 13:40