从硬编码内容无限滚动答案

【问题标题】：Making an infinite scroll from hard-coded content从硬编码内容无限滚动
【发布时间】：2013-08-24 18:27:15
【问题描述】：

我一直在尝试制作一个无限（以及半无限）滚动，它从硬编码的 div 中获取信息（因为我还不知道任何后端语言）。我的研究发现了大量用于无限滚动的优秀 jQuery，但它们都是用于数据库，而不是硬编码内容。

我最终要实现的是无限滚动，首先将 X div 加载到 DOM 中，当用户到达页面底部时，加载 X 更多 div，并重复直到没有更多 div待加载。

你们中是否有人知道一些好的或相关的脚本或任何可能对我有帮助的小提琴？我的部分问题是我仍然处于 JS 的学习曲线中；当我看一个脚本时，我经常能理解发生了什么，但我仍然很难从头开始编写自己的脚本。

感谢任何帮助或指导。提前致谢！！

【问题讨论】：

那些硬编码的 div 在哪里？在您的 HTML 中，还是在 js 代码中？我的意思是，滚动条应该只是切换它们的可见性，还是实际上将它们插入到 DOM 中？
硬编码的 div 在 HTML 中。我希望滚动条实际上将它们插入到 DOM 中，因此如果 div 变得图像重，则可以优化加载时间。

标签： javascript jquery infinite-scroll

【解决方案1】：

基于这里的代码：Alert using Jquery when Scroll to end of Page

到达页面底部时创建一个新的<div> 元素

$(window).scroll(function() {
    if (document.documentElement.clientHeight + $(document).scrollTop() >= document.body.offsetHeight)
    {
        $('body').append('<div></div>');
    }
});

【讨论】：

【解决方案2】：

您的 HTML 需要存储在某个地方，如果您有足够的内容来考虑无限滚动，您可能不想在初始请求中全部加载，所以假设每个“帖子”都存储在单独的 HTML 中服务器上的文件：/posts/1.html。并且您想将它们附加到主文档中的 div 中：<div id="posts"></div>。

您需要一种方法来下载给定的帖子并将其附加到您的 div：

function loadPost (id) {
  $.get('/posts/'+id+'.html').done(function (html) {
    $('#posts').append(html);
  });
}

现在您需要一种在滚动到页面底部时触发loadPost() 的方法。此示例使用jQuery Waypoints 在 div 底部出现时调用处理函数：

var currentPost = 1;

$('#posts').waypoint({
  offset: 'bottom-in-view',
  handler: function () {
    loadPost(currentPost++);
  }
});

【讨论】：