Question

我一直试图制作一个无限（半无限）滚动，从硬编码的div中提取自己（因为我还不知道任何后端语言）。我的研究为无限卷轴提供了大量的jQuery，但它们都是用于数据库，而不是硬编码内容。

我最终想要实现的是一个无限滚动，首先将X div加载到DOM中，当用户到达页面底部时，加载X个更多div，并重复直到不再有div为止离开了。

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

感谢任何帮助或指示。在此先感谢!!

Answer 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>');
    }
});

Answer 2

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

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

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

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

var currentPost = 1;

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

从硬编码内容进行无限滚动

2 个答案: