10

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?

10
  • could you replicate issue here: jsfiddle.net/cQ7vP ???
    – A. Wolff
    Jan 7, 2014 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 7, 2014 at 13:09
  • The function is called in a $(document).ready function. Replacing that with $(scrollalert) makes no difference
    – Forza
    Jan 7, 2014 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 7, 2014 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 7, 2014 at 13:25

6 Answers 6

6

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/

0
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

0

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

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

0

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>

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

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.