Javascript 如何基于用户滚动加载网页内容

如何在用户滚动网页时加载内容。如何实现这一点？

一般来说，您需要这样的结构

....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
....first page of content...
<div id="placeHolder"></div>

您可能需要保留一个名为

lastId

的javascript变量，该变量存储最后显示的id，并将其传递给AJAX接收器，以便它知道要返回的新内容。然后在AJAX中，您可以调用

      $.post('getMoreContent.php', 'lastId=' + lastId, function(data) {
           //Assuming the returned data is pure HTML
           $(data).insertBefore($('#placeHolder'));
      });

---

我就是这么做的。

您指的是动态渐进加载

这是一个非常有文档记录的概念，甚至有一些来自不同库的内置支持。例如，JQuery实际上有一个支持渐进加载的GridView

---

您需要使用AJAX来实现此功能。

您可以使用一些库（如jQuery）来检索内容，然后将其附加到页面内容，或者您可以使用一些jQuery插件（如：

）来扩展页面432。根据我的经验，

if（$（窗口）.scrollTop（）==$（文档）.height（）-$（窗口）.height（））

可能并非始终如一地正确（就个人而言，我无法使其正确，因为它是跳跃数字）。
此外，如果用户上下滚动，可能会在等待第一个ajax调用返回时触发许多请求

所以我所做的就是使用>=而不是==。 然后，在发出ajax请求之前解除scrollTop的绑定。 然后，如果ajax返回了任何数据（这意味着可能会有更多数据），则再次绑定它

在这里

<script type="text/javascript">
  $(document).ready(function(){                
        $(window).bind('scroll',fetchMore);
   });

   fetchMore = function (){
       if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){
           $(window).unbind('scroll',fetchMore);
            $.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 },
            function(data) {
               if(data.length>10){
                    $(data).insertBefore($('#moreHolder'));
                    $(window).bind('scroll',fetchMore);
               }
            });
        }
   }
</script>

$（文档）.ready（函数（）{
$（窗口）.bind（'scroll'，fetchMore）；
});
fetchMore=函数（）{
if（$（窗口）.scrollTop（）>=$（文档）.height（）-$（窗口）.height（）-300）{
$（窗口）.unbind（'scroll'，fetchMore）；
$.post（'ajax/ajax_manager.php'，{'action'：'moreviews'，'start'：$（'.review'））.length，'step'：5}，
功能（数据）{
如果（数据长度>10）{
$（数据）.insertBefore（$（'#moreHolder'）；
$（窗口）.bind（'scroll'，fetchMore）；
}
});
}
}

---

`

您可以使用jscroll作为jquery插件

---

可能的重复：虽然Dutchie下面的答案比那些页面上的任何答案都好。根据DOM结构，

#占位符

不一定是必需的，但这基本上是我以前做过的。正确。如果整个内容已经在一个div中，您可以使用

.append（）

或类似的方法。此外，您可能需要添加一个缓冲区，以便不到达确切的底部，只需要到达底部的200px以内。有些浏览器在滚动时会有点怪，甚至我的鼠标也会跳来跳去。添加缓冲区可以缓解其中的一些怪癖。@gourav听起来您一般需要AJAX方面的帮助。你熟悉AJAX吗？如果没有，这里有很多帖子可以帮助您开始（）。还请阅读：如果除了此解决方案之外，您还向哈希中添加了一些信息，以便用户在跟踪链接或刷新后返回页面时具有“保存状态”，该怎么办？当它们返回时，您可以使用哈希信息加载到以前滚动到的内容。然后他们不必滚动/等待，滚动/等待等…我发现这个答案中的想法肯定改进了432的伟大答案。我想在滚动快结束时获取数据，即使300对我来说也不起作用。只有当我到达页面末尾时才会触发。为什么要投否决票？我在谷歌上找到了这个页面，这就是我希望找到的。拉齐克，你应该提供代码示例，而不仅仅是链接到其他网站。

<script type="text/javascript">
  $(document).ready(function(){                
        $(window).bind('scroll',fetchMore);
   });

   fetchMore = function (){
       if ( $(window).scrollTop() >= $(document).height()-$(window).height()-300 ){
           $(window).unbind('scroll',fetchMore);
            $.post('ajax/ajax_manager.php',{'action':'moreReviews','start':$('.review').length,'step':5 },
            function(data) {
               if(data.length>10){
                    $(data).insertBefore($('#moreHolder'));
                    $(window).bind('scroll',fetchMore);
               }
            });
        }
   }
</script>