只有在下面沒有任何內容的情況下,無限滾動檢測頁面底部

[英]Infinite scroll detecting bottom of page only if there is nothing underneath


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.

我正在使用angularjs進行無限滾動頁面,當用戶到達頁面底部時會加載更多項目。我的問題是在無限滾動容器下可能有也可能沒有更多“東西”。因此,如果用戶到達頁面底部,如果存在“東西”,我不想加載更多項目。因此,當無限滾動容器到達該容器的末尾而不是頁面的末尾時,我想加載更多項目。

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

對於無限滾動,我有一個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);
             }
         });
    };
});

2 个解决方案

#1


0  

you can get stuff height under infiniti scroll container and use it

你可以在英菲尼迪滾動容器下獲得東西高度並使用它

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

#2


0  

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

只使用jQuery就可以了。請參閱下面的代碼段。

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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/05/09/725c2f4ab87ee9927c7da8afbd378f01.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com