只有当底部没有任何东西时，无限滚动才能检测页面的底部 [英] Infinite scroll detecting bottom of page only if there is nothing underneath

问题描述

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

对于无限滚动我有一个angularjs指令像这样：
$ b $ pre $ myApp.directive（scroll，function（$ window）{
return function（scope，元素，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）;
}
}）;
};
}）;


解决方案

只有使用jQuery，才能做到这一点。请参阅下面的代码片段。

 < script> 
 $（function（）{
 var w = $（window）; 
 loadNewPage（）; 
 
 //每次用户滚动
 w .scroll（function（）{
 //文档到达结尾？
 if（$（document）.height（） -  win.height（）== win.scrollTop（））{
 loadNewPage（）; 
} 
}）; 
}）; 
< / script> 
  

I'm doing an infinite scroll page with angularjs that loads more items when the user reaches the bottom of the page. My problem is that under the infinite scroll container may or may not have more "stuff". So i don't want to load more items if the user reaches the bottom of the page if that "stuff" is present. So i want to load more items when the infinite scroll container reaches the end of that container and not the end of the page.

For the infinite scroll i have an angularjs directive like this:

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);
             }
         });
    };
});

解决方案

Only using jQuery you can do it. See this code snippet below.

<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>

这篇关于只有当底部没有任何东西时，无限滚动才能检测页面的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！