1

一旦某个元素在浏览器画布中可见，是否有任何 javascript 库为我提供自定义事件？

基本思想是，一旦列表中的最后一个元素在屏幕上可见，我想加载接下来的 10 个元素，这样用户就不需要单击“下一页”按钮。为了实现这一点，在显示最后一个元素时立即触发的 onBecomesVisible 事件会很方便。有这样的吗？

Slashdot以这种方式加载其首页。

4

4 回答 4

7

您可以使用 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 不会返回元素是否在视口中。但是我已经编辑了源代码，所以它现在会检查元素是否在视口中。该函数检查元素是否在视口下方，我们假设如果它不在视口下方，则它已被滚动到视图中并且我们应该执行该函数。

EDIT2
在 google chrome 1.0、firefox 3.0.10 和 IE7 中对此进行了测试

于 2009-05-08T12:54:10.107 回答
2

您可能想查看无休止的滚动：

http://plugins.jquery.com/project/endless-scroll

于 2009-05-08T12:32:46.977 回答
2

Dustin Diaz（他真的很聪明，你应该阅读更多他的东西）在 2007 年写了一篇关于检测元素何时滚动到视图中的文章。

可能正是您需要的。

于 2009-05-08T12:42:30.510 回答
0

另一种想法是始终使用包装函数来显示/隐藏所有内容。换句话说，您总是使用自己的函数，而不是直接执行style.display='none';or ，将元素的 id 传递给该函数。$("#something").hide();

然后，您可以更轻松地跟踪元素何时变为可见/隐藏并设置要运行的事件句柄。

于 2009-05-09T11:00:54.347 回答