Question

我目前正在尝试创建一个动态网站，当您向下滚动时，它会加载页面上的更多元素。

HTML：

<div>some elements here</div>
<div id="page2"></div>

JavaScript的：

var distance = $('part2').offset().top,
    $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
        $("#part2").append("pages/page2.html");
    }
});

我的问题是它会在第二个元素加载时继续刷新页面。我需要一种方法来加载第二个页面，然后停止监听滚动。我打算稍后再实现第三部分，所以我将有另一个div用于＆＃34; page3＆＃34;将在滚动的另一页面加载。非常感谢您的帮助。

Answer 1

您可以使用预先制作的插件而不是自己编写一个吗？例如，http://jscroll.com/需要jQuery。

Answer 2

更新

看起来你正试图在page2 div中加载第二页。如果是这样，你应该使用load jQuery方法。

$("#part2").load("pages/page2.html");

你忘记了jQuery选择器中的＃

var distance = $('#part2').offset().top,

Answer 3

您是否尝试过浏览此问题中的答案？

jQuery load more data on scroll

其中一个答案就是这个

$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
       // ajax call get data from server and append to the div
}
});

回答@deepakssn

使页面滚动并动态加载元素

3 个答案:

更新