Question

我有一个页面（我们称之为1.php），它使用jQuery-ajax将2.php加载到div框中。 2.php从我的数据库打印20条记录。当我在滚动时到达div框的底部时，我希望它加载接下来的20条记录。像Facebook，Twitter等等做到了。

现在，我已经得到了这种行为，但只有当它自己加载2.php时！但不在div框内。

我该怎么做？

提前致谢！

Answer 1

文件1.php应输出：

<div id="content">
</div>

<script type="text/javascript">
  $(document).ready(function() {
    // when we scroll, check the position:
    $(window).scroll(function()
    {
      // if at bottom, add new content:
      if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
        $.get("2.php",function(data) {
          $("#content").append(data);
        },'html');
      }

    }); 

  });
</script>

如果要将迭代次数发送到2.php，您可以在一些隐藏的输入中记住它并将其作为参数发送到$ .get（）。

希望它有所帮助。

Answer 2

你可能在2.php中有一些初始化Javascript代码来设置滚动事件处理程序。使用ajax加载页面并将其放在div中时，不会执行此初始化代码。处理Ajax请求后，您需要执行相同的初始化代码。

Answer 3

考虑为jQuery使用waypoints插件： http://imakewebthings.github.com/jquery-waypoints/

然后看看无限滚动示例： http://imakewebthings.github.com/jquery-waypoints/infinite-scroll/

Answer 4

这里的关键是检测滚动位置。这是否正常工作？

在ajax加载页面内无限滚动

4 个答案: