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

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

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

$.ajax({
键入：“获取”，
url:“/GetItems”，
数据：{'pageNum'：$（'#pageNum'）.val（），
数据类型：“json”，
成功：功能（响应）{
$（'#MyDiv ul'）.append（response.Html）；
$（'#pageNum'）.val（response.pageNum）；
}
}
});
#MyDiv
{
边框：实心1px#ccc；
宽度：250px；
高度：500px；
溢出y：滚动；
}


...

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

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

更新

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

更新2

---

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

也许最简单的方法是将一个元素放在列表的最底部，当它进入视图时，你知道它们会向下滚动，这样你就可以加载更多。您可以找到关于如何检查ViewPort中的元素的几个答案。谢谢，听起来它会起作用，但是它将如何与我的代码集成呢。我发现：但是，我什么时候调用elementInViewport函数？与其单击

，不如调用按钮使用的函数。（+1）请注意，如果您已经在页面底部并刷新页面，则这可能不起作用：您已经在底部，而滚动触发器尚未启动fired@Asenar我已经更新了我的答案。在页面加载时触发滚动事件（或者触发点击事件，或者更好地调用按钮使用的函数）应该可以做到这一点……真是个好主意！非常感谢，如果有更完整的样品会有帮助的。我得到：TypeError:null不是对象（计算'n.body[“scroll”+e]'）
$(window).on('scroll', function(){
    if( $(window).scrollTop() > $(document).height() - $(window).height() ) {
        $("#load-more").click();
    }
}).scroll();