0

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

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

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

任何帮助或方向表示赞赏。提前致谢！！

4

2 回答 2

0

Based on the code here: Alert using Jquery when Scroll to end of Page

Create a new <div> element when you reach the bottom of the page

$(window).scroll(function() {
    if (document.documentElement.clientHeight + $(document).scrollTop() >= document.body.offsetHeight)
    {
        $('body').append('<div></div>');
    }
});
于 2013-08-26T23:16:52.360 回答
0

您的 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++);
  }
});
于 2013-08-26T23:31:33.780 回答