添加相同页面的无限滚动功能

Posted 2023-05-07

【中文标题】添加相同页面的无限滚动功能

【英文标题】：Endless scroll function with adding same page

【发布时间】：2020-03-02 16:20:03

【问题描述】：

我需要一个网页的无限滚动功能。如果页面滚动到底部，应该添加相同的页面而不重新加载内容。

这是代码的开头：

 $(window).scroll(function()    
   if($(window).scrollTop() + $(window).height() == $(document).height()) 
       alert("bottom!");
   
);

非常感谢您的帮助！

【参考方案1】：

您可以复制body 的内容并将其附加到您的alert 调用所在的位置。

$(document).ready(function()


  var contents = $("body").html();

  $(window).scroll(function()    
     if($(window).scrollTop() + $(window).height() == $(document).height()) 
         $("body").append(contents);
     
  );

)

JSFiddle

值得指出的是，我不会把它留在正文标签内，而是放在头的底部，因为复制正文元素会导致脚本的多个实例运行。