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

Question

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

这里是代码的开头：

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

非常感谢您的帮助！

Answer 1

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

$(document).ready(function(){


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

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

})

JSFiddle

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

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

Endless scroll function with adding same page

jquery

scroll

infinite-scroll