如何根据用户滚动加载网页内容答案

【问题标题】：How to load the web page content based on user scrolling如何根据用户滚动加载网页内容
【发布时间】：2021-08-21 00:18:41
【问题描述】：

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

【问题讨论】：

可能重复：stackoverflow.com/questions/183782 stackoverflow.com/questions/1464968 stackoverflow.com/questions/3283669 stackoverflow.com/questions/3584088 尽管达奇的回答比这些页面上的任何回答都好。

标签： javascript jquery

【解决方案1】：

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

....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>

然后，您需要检测何时接近页面末尾，并获取更多数据

 $(window).scroll(function(){
      if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           AddMoreContent();
      }
 });    

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

您可能需要保留一个名为 lastId 之类的 javascript 变量，它存储最后显示的 id 并将其传递给 AJAX 接收器，以便它知道要返回哪些新内容。然后在你的 AJAX 中你可以调用

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

我在 my company's search page 上正是这样做的。

【讨论】：

#placeholder 不一定是必需的，具体取决于 DOM 结构，但这基本上是我之前的做法。
正确。如果整个内容已经在一个 div 中，你可以使用.append() 或其他类似的东西。
另外，您可能想要添加一个缓冲区，这样您就不需要到达确切的底部，您只需要到达底部的 200px 以内。一些浏览器在滚动时会变得有点古怪，甚至我的鼠标也会跳来跳去。添加缓冲区可以缓解其中一些怪癖。
@gourav 听起来您一般需要 AJAX 方面的帮助。你熟悉 AJAX 吗？如果没有，这里有很多帖子可以帮助您入门 (stackoverflow.com/questions/tagged/ajax)。另请阅读：api.jquery.com/jQuery.ajax 和 en.wikipedia.org/wiki/Ajax_(programming)
如果除了此解决方案之外，您还向哈希添加了一些信息，以便用户在点击链接或刷新后返回页面时具有“已保存状态”？当它们返回时，您可以使用哈希信息来加载之前滚动到的内容。然后他们就不必滚动/等待、滚动/等待等......

【解决方案2】：

只是为了扩展 Dutchie432。根据我的经验

if ($(window).scrollTop() == $(document).height() - $(window).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>

`

【讨论】：

我发现这个答案中的想法肯定改善了 Dutchie432 的出色答案。
我想在滚动快要结束时获取数据，即使 300 对我也不起作用。它仅在我到达页面末尾时触发

【解决方案3】：

您指的是动态渐进式加载。

这是一个有据可查的概念，甚至有一些来自不同库的内置支持。例如，JQuery 实际上有一个支持渐进式加载的 GridView。

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

【讨论】：

【解决方案4】：

您可以使用 window.addeventlistener 来跟踪网页的滚动行为，并在用户位于网页脚下时向页面加载更多内容。

document.documentElement.scrollTop、document.documentElement.clientHeight 和 document.documentElement.scrollHeight 将帮助您实现这一目标。

例如：

window.addEventListener('scroll',()=>{
  const {scrollTop,clientHeight,scrollHeight} = document.documentElement;
  if ((scrollTop+clientHeight)>=scrollHeight) {
    getContent((current_page+1));
  }
});

【讨论】：

终于！在数千个使用纯 js 的 jQuery sn-ps 中，正是我想要的。
效果很好。

【解决方案5】：

你可以使用 jscroll 一个 jquery 插件

http://jscroll.com/

【讨论】：

为什么投反对票？我用谷歌找到了这个页面，这就是我希望找到的。
Lazik 你应该提供代码示例，而不仅仅是链接到其他站点。

【解决方案6】：

你可以使用jQuery之类的库来检索内容，然后将其附加到页面内容中，或者你可以使用一些jquery插件，例如：http://gbin1.com/technology/jquerynews/20111017jquerypluginwaypoints/infinite-scroll/

【讨论】：