仅当下方没有任何内容时，才无限滚动检测页面底部答案

【问题标题】：Infinite scroll detecting bottom of page only if there is nothing underneath仅当下方没有任何内容时，才无限滚动检测页面底部
【发布时间】：2016-09-04 06:18:00
【问题描述】：

我正在使用 angularjs 做一个无限滚动页面，当用户到达页面底部时会加载更多项目。我的问题是无限滚动容器下可能有也可能没有更多“东西”。因此，如果存在“东西”，如果用户到达页面底部，我不想加载更多项目。所以我想在无限滚动容器到达该容器的末尾而不是页面的末尾时加载更多的项目。

对于无限滚动，我有一个这样的 angularjs 指令：

myApp.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
         angular.element($window).bind("scroll", function(event) {
             var docHeight = $(document).height();
             var reachBottom = $($window).scrollTop() == (docHeight - $($window).height());
             if (reachBottom) {
                  setTimeout(scope.loadMore(), 100);
             }
         });
    };
});

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

你可以在 infiniti 滚动容器下获取东西高度并使用它

 var docHeight = $(document).height();
 var stuffHeight = $('#stuff').height();
 var reachBottom = $($window).scrollTop() == (docHeight - ($($window).height() + stuffHeight));
 if (reachBottom) {
      setTimeout(scope.loadMore(), 100);
 }

【讨论】：

我的问题是没有$('#stuff') 元素我可以处理以获得高度
用户滚动容器高度以查找东西高度或只是if $($window).scrollTop() == $('#container').height()

【解决方案2】：

只有使用 jQuery 才能做到。见下面这段代码sn-p。

<script>
    $(function () {
        var w = $(window);
        loadNewPage();

        // Each time the user scrolls
        w.scroll(function () {
            // End of the document reached?
            if ($(document).height() - win.height() == win.scrollTop()){
                loadNewPage();
            }
        });
    });
</script>

【讨论】：