Question

我是jQuery的新手。基本上，我需要在页面上编写延迟加载的查询。我发现这篇文章：Detecting when user scrolls to bottom of div with jQuery我想从那里尝试查询：

jQuery(function($) {
  $('#pics').bind('scroll', function() {
    if($(this).scrollTop() +
       $(this).innerHeight() >= this.scrollHeight) {
      alert('end reached');
    }
  });
});

然而，对我来说它没有用，我决定创建一个简单（非常简单）的页面并测试脚本是否可以在那里工作。这是我的代码：

jQuery(function($) {
  $('#pics').bind('scroll', function() {
    if($(this).scrollTop() +
       $(this).innerHeight() >= this.scrollHeight) {
      alert('end reached');
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>YEAH SANDWICHES</h1>
<div id="pics">
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
  <img src="http://placehold.it/304x228" alt="" /><br />
</div>

但是，所有图像都是预先加载的，jQuery脚本根本不起作用。我做错了什么？

Answer 1

形成文档scroll()：

当用户滚动到元素中的其他位置时，滚动事件将发送到元素。它适用于窗口对象，也适用于可滚动框架和元素，溢出CSS属性设置为滚动 （或当元素的显式高度或宽度小于高度时自动或其内容的宽度）。

将这些css属性添加到#pics

<强> Fiddle

#pics{
    overflow:scroll;  //overflow-y:scroll
    height:500px
}

Answer 2

您需要在#pics上滚动才能使用滚动选项。我不知道你为什么使用jScroll，但我把它删除了。你可以这样使用：

工作代码段

只需转到页面末尾并查看提醒！

＆＃13;

$(function() {
  $("#pics").scroll(function() {
    if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
      console.log('end reached');
    }
  });
});

＆＃13;

#pics {height: 300px; overflow: auto;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>YEAH SANDWICHES</h1>
<div id="pics">
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;"/><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
  <img src="img1.png" alt="Mountain View" style="width:304px;height:228px;" /><br />
</div>
<script>
  jQuery(function($) {
    $('#pics').bind('scroll', function() {
      if($(this).scrollTop() +
         $(this).innerHeight() >= this.scrollHeight) {
        alert('end reached');
      }
    })
  });
</script>

＆＃13;

为什么我的jQuery scoll事件不起作用？

2 个答案: