How to get infinite scroll to work?

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?

Steini

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/

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

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

Greg Vestil

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>

来源：https://stackoverflow.com/questions/20972026/how-to-get-infinite-scroll-to-work

标签

javascript

jquery

infinite-scroll