Question

我意识到这里有几个问题可以解决无休止的滚动问题。但是大多数都使用插件。

我想知道如何实现可以使用现有分页功能的无限滚动。目前我有一个“加载更多”按钮，当点击时，将获取接下来的10个项目，并附加到列表中。当点击“加载更多”按钮时，我不希望这样做，我希望当滚动位置到达底部时会发生这种情况。此外，此列表不在主页上，它在DIV内。将页码存储在ID为“pageNum”的隐藏字段中。

$.ajax({
        type: "GET",
        url: "/GetItems",
        data: { 'pageNum': $('#pageNum').val() },
        dataType: "json",
        success: function (response) {
                $('#MyDiv ul').append(response.Html);
                $('#pageNum').val(response.PageNum);
            }
        }
});

#MyDiv
{
    border:solid 1px #ccc; 
    width:250px;
    height:500px;
    overflow-y: scroll;
}

<div id="MyDiv">
  <ul>
    <li>...</li>
    ...
  </ul>
</div>

Answer 1

最简单的方法，是检查您是否已达到底部，然后在您的＆＃34;更多＆＃34; - 按钮上触发点击事件。

$(window).on('scroll', function(){
    if( $(window).scrollTop() > $(document).height() - $(window).height() ) {
        $("#load-more").click();
    }
}).scroll();

上面的脚本只是一个示例，请勿在您的生产环境中使用它。

<强>更新

...更好的方法是调用函数而不是触发调用函数的事件。

<强> UPDATE2

......最好的方法是：让用户决定做什么（在这种情况下，他向下滚动到达页面的末尾，而不是到达下一页）;）

如何在Javascript / jQuery中的DIV中实现无限/无限滚动

1 个答案: