How to get infinite scroll to work?

Question

I'm trying to get this infinite load script to work in my project.

Here's my HTML:

<!-- Contents -->
<div id="page-container">
  <div id="scroller">
    <div id="page_1" class="pagina"></div>
    <div id="page_2" class="pagina"></div>
    <div id="page_3" class="pagina"></div>
    <div id="page_4" class="pagina"></div>
    <div id="page_5" class="pagina"></div>
    <div id="page_6" class="pagina"></div>
  </div>
</div>

<div id="pages-to-load">
  <div id="page_7" class="pagina"></div>
  ...
  <div id="page_25" class="pagina"></div>
</div>

And here's the script:

function scrollalert(){
  var pages = document.getElementById("scroller").getElementsByTagName("div");
  var currentPageId = pages[pages.length - 1];
  //console.log("currentPageId is: "+currentPageId);
  var scrollbox = document.querySelector('#page-container');
  var scrolltop = $(window).scrollTop();
  var scrollheight = scrollbox.scrollHeight;
  var windowheight = $(window).height();
  var scrolloffset=20;
  console.log(scrolltop);
  console.log(scrollheight);
  console.log(windowheight);
  console.log(scrollheight-(windowheight+scrolloffset));
  if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
    //fetch new items
    console.log("loading more pages");

    (function() {
      alert('test');
      var i;
      var pagesToLoad = $("#pages-to-load > div").size();
      for (i = 0; i < pagesToLoad; i++) {
        console.log(pagesToLoad[i].id);
        $.get(pagesToLoad[i].id, function(newitems){
          alert('get new page');
          $('#scroller').append(newitems);
          updatestatus();
        })
      };
    })();
  };
}

Whatever I try, I can't seem to load and append my new pages. Also when scrolling down, my scrollTop and scrollHeight don't change. I'm sure I'm missing something obvious here. Also my pages-to-load is undefined?

could you replicate issue here: http://jsfiddle.net/cQ7vP/ ??? — A. Wolff, Jan 07 '14 at 12:54
Very strange. In the fiddle it seems to work. The console for my app says Uncaught TypeError: Cannot read property 'id' of undefined on the pages-to-load variable. Why does it do that? — Forza, Jan 07 '14 at 13:09
The function is called in a `$(document).ready` function. Replacing that with `$(scrollalert)` makes no difference — Forza, Jan 07 '14 at 13:18
Ya because it is same behaviour. So error is something else. FYI, size() is deprecated, you should use instead: `var pagesToLoad = $("#pages-to-load > div").length();` but that won't solve your issue. Which exact line bring you the error? Just wait, pagesToLoad is supposed to be a number so what are you tring to do here? Like i see it, should be insetad of: `pagesToLoad[i].id` use: `$("#pages-to-load > div").get(i).id` — A. Wolff, Jan 07 '14 at 13:21
Why would it work in jsfiddle but not in my app? I don't know any more I can try to solve this issue — Forza, Jan 07 '14 at 13:25
It doesn't work in jsfiddle too, get same error. I just set the jsfiddle in hope you could point out what was not working. I don't really check your code. Here fixed jsfiddle with the code i was talking about, just to remove error: http://jsfiddle.net/cQ7vP/1/ — A. Wolff, Jan 07 '14 at 13:27
jsFiddle works perfectly for me though. Check: http://jsfiddle.net/nXnRn/1/ — Forza, Jan 07 '14 at 13:35
No it doesn't, check your console... I told you this fix this error: http://jsfiddle.net/cQ7vP/1/ — A. Wolff, Jan 07 '14 at 13:37
I have put together a [medium article here](https://medium.com/me/stats/post/33cb7be18407) about how best to achieve that behaviour. please do check — Jose Greinch, Dec 23 '20 at 09:45

score 5 · Accepted Answer · edited Nov 12 '15 at 18:36

Here is one infinite-scroll script of mine using JQuery which works:

Html:

<html>
    <head>
    <title>Scroll Troll Page</title>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
    <div id="scrollbox">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
</body>

<script type="text/javascript">
    $(window).scroll(function () {
        //- 10 = desired pixel distance from the bottom of the page while scrolling)
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        var box = $("#scrollbox");
    //Just append some content here
    box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
        }
});
</script>

in Line:

box.html(box.html + "Place content to expand here");

You can add the content that should be added to your container when reaching the bottom of the page while scrolling.

Working jsFiddle:

http://jsfiddle.net/MdrJ4/3/

Jose Greinch · Answer 2 · 2020-12-23T10:19:29.507

1

I think we should rely on intersectionObserver instead of the onScroll event. I have put together an article on medium here explaining the performance gains of the two approaches

you only need vanilla js

edited Dec 23 '20 at 10:19

answered Dec 23 '20 at 09:46

Jose Greinch

275
1
12

alex · Answer 3 · 2016-08-08T12:25:45.410

i have a problem for using endless scrolling, so i wrote a library and solved my problem. i think this library may help you for this problem. use this library as easy way to implement infinite scrolling :

https://github.com/hamedtaheri32/infinite-scrolling

example :

<script>
$(document).ready(function(){
    $(document).infiniteJscroll({
        offset:0,
        topOfPage:function(){
            console.log('Scrolled to Page Top');

        },
        bottomOfPage:function(){
            console.log('Scrolled to Page Bottom');
            addContent();
        },
        pageInit:function(){
           console.log('Initialize page');
            addContent();
        }
    });
});
//This method used for simulate loading data from server. replace it with AJAX loading method.
function addContent() {
    var c = '';
    for (var i = 0; i < 10; i++) {
        c += '<a class="box"></a>';
    }
    $("#post").append(c);
}

</script>

features :

detect page top
detect page bottom
can use offset for detect page bottom
have page initialize method
ability for mix with AJAX loading page

Please review [How to offer personal open-source libraries?](https://meta.stackexchange.com/q/229085) before pasting your solution everywhere. — Martijn Pieters, Aug 06 '16 at 12:41

SeyedMohammad SeyedMohammadi · Answer 4 · 2018-08-24T16:25:22.803

can use below script

window.onscroll = function (ev) {
    let scrollHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
    );
    let currentScrollHeight = window.innerHeight + window.scrollY;

    if ((scrollHeight - currentScrollHeight) < 200) {
       // your statement
    }
};

full example in jsfiddle

score 0 · Answer 5 · edited Mar 21 '19 at 07:39

This is what I did: (Please correct me if I'm wrong)

$(document).ready(() => {
  var page = 1;
  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      page++;
      if (page == 2) {
        $('#div2').removeClass('hide');
      }
      if (page == 3) {
        $('#div3').removeClass('hide');
      }
      if (page == 4) {
        $('#div4').removeClass('hide');
        page = 1;
      }
    }
  });
});

.page {
  width: 100%;
  background-color: black;
  color: white;
  height: 100vh;
  border-top: 1px solid white;
}

.hide {
  display: none;
}

body {
  margin: 0px;
  padding: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Infinite Scroll</title>
  <link href='css/bootstrap.css' ref='stylesheet'>
</head>

<body>

  <div id='div' class='page'>
    <h1>Page 1</h1>
  </div>
  <div id='div2' class="page hide">
    <h1>Page 2</h1>
  </div>
  <div id='div3' class="page hide">
    <h1>Page 3</h1>
  </div>
  <div id='div4' class="page hide">
    <h1>Page 4</h1>
  </div>

  <script src='js/jquery.min.js'></script>
  <script src='js/popper.min.js'></script>
  <script src='js/bootstrap.min.js'></script>
  <script src='js/myjquery.js'></script>
</body>

</html>

score 0 · Answer 6 · answered Mar 10 '21 at 02:48

0

// check if scrolling near to bootom of page , load more photos
window.addEventListener('scroll',()=>{
   if(window.innerHeight+window.scrollY>=document.body.offsetHeight-100){
       //your logic or function
   }
});

answered Mar 10 '21 at 02:48

Milind Pawar

22
5

How to get infinite scroll to work?

6 Answers6

Linked