18

我意识到这里有几个问题可以解决无限滚动的问题。然而，他们中的大多数都在使用插件。

我想知道如何实现与我现有的分页功能一起使用的无限滚动。目前我有一个“加载更多”按钮，当点击时，将获取接下来的 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>
4

1 回答 1

40

最简单的方法是检查您是否已到达底部并触发“加载更多”按钮上的点击事件。

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

上面的脚本只是一个例子，不要在你的生产环境中使用它。

更新

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

更新2

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

于 2013-03-03T04:37:06.973 回答