Infinite Scroll in html javascript

Question

I have this code I've been working on to add infinite scrolling to a blog, and I'm stuck. It kinda works, but it stops scrolling after adding just a few div elements on mobile devices. I created 16 txt files in the same directory named 0.txt to 15.txt respectively, and I added added the following content into each one...

Contents of the text file:

<div class="card">
      <h2 class="post">TITLE HEADING 1</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="tempimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>

But something is still not right. Could someone please help me figure out a better way to do this? I still need the ability to load the articles from external files and I'd prefer to do it with just html and javascript, since I haven't had much luck with jquery plugins either.

Contents of index.html and Image of directory layout:

<!DOCTYPE html><html lang="en"><head><title>scrolling</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.page {height: 80%;border:solid 5px #ccc}
</style>
</head>
<body>

<div id="scrollcontent">

<div id="page" class="page"></div>

</div>

<script>

//########################
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}

function getDocHeight() {
var D = document;
return Math.max(
    D.body.scrollHeight, D.documentElement.scrollHeight,
    D.body.offsetHeight, D.documentElement.offsetHeight,
    D.body.clientHeight, D.documentElement.clientHeight
);
}

var nextcount = "2";
var NextArticle = "2.html";
 $.get("0.txt", function (data) {
                    $("#page").append(data);
                });
 $.get("1.txt", function (data) {
                    $("#page").append(data);
                });
 $.get("2.txt", function (data) {
                    $("#page").append(data);
                });				
document.addEventListener("scroll", function (event) {
if (getDocHeight() == getScrollXY()[1] + window.innerHeight) 
{ 
  nextcount++;
  NextArticle = nextcount + ".txt";
  var oldcontent = document.getElementById('scrollcontent');
  //oldcontent.innerHTML = oldcontent.innerHTML + '<div class="page">new content loaded</div>';
  
                $.get(NextArticle, function (data) {
                    $("#page").append(data);
                });

  document.getElementById("scrollcontent").innerHTML=oldcontent.innerHTML;

}
});
</script>
</body>
</html>

Ole · Accepted Answer · 2019-09-26 12:23:06Z

1

Try using the https://infinite-scroll.com library. They have their own docs which you can read through.

answered Sep 26, 2019 at 12:23

Ole

133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sam Roney Over a year ago

hmm I didn't come across that one yet, thanks I'll take a look

Sam Roney Over a year ago

Their demo seems complicated and I'm stuck again... do you have any simpler examples using their code? I'm just trying to get the index.html to smoothly scroll and load the next page 0.html, 1.html ... and so on

Sam Roney Over a year ago

Here we go! I found more examples codepen.io/desandro/pens/tags/…

Sam Roney · Accepted Answer · 2019-09-27 02:31:44Z

0

So my solution was to use ajax to pull the next page. I also needed to save the pages as html and not text files. This may not be the most elegant way, but it worked.

		  $.ajax({
              url: "./" + NextPage,
              success: function (data) { $("#blogPosts").append(data); },
              dataType: 'html'});

answered Sep 27, 2019 at 2:31

Sam Roney

113 bronze badges

Collectives™ on Stack Overflow

Infinite Scroll in html javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related