Question

116

Javascript Infinite Scroll inside a div

rated 0 times [ 117] [ 1] / answers: 1 / hits: 19711 / 10 Years ago, fri, may 30, 2014, 12:00:00

I am trying to create an infinite loading page with the use of javascript. I found this: How to do infinite scrolling with javascript only without jquery

I have been playing with the last answer that links to this jsfiddle page: http://jsfiddle.net/8LpFR/

 document.addEventListener(scroll, function (event) {

      checkForNewDiv();

 });



 var checkForNewDiv = function () {

      var lastDiv = document.querySelector(#scroll-content > div:last-child);

      var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;

      var pageOffset = window.pageYOffset + window.innerHeight;



      if (pageOffset > lastDivOffset - 10) {

          var newDiv = document.createElement(div);

          newDiv.innerHTML = my awesome new div;

          document.getElementById(scroll-content).appendChild(newDiv);

          checkForNewDiv();

      }

 }; 

 checkForNewDiv();

How would I modify that in order to make the scrolling work inside a div rather than as the whole page? As in, what would lastDivOffset and pageoffset change to?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

wyattkennyc

Add To Favorites

Follow

Total Points: 650

Total Questions: 102

Total Answers: 90

Location: Monaco

Member since Mon, May 23, 2022

2 Years ago

answered 10 Years ago bryonk · Accepted Answer

Here is the solution without creating any new wrapper division.

document.getElementById(scroll-content).addEventListener(scroll, function(event) {

  var newDiv = document.createElement(div);

  newDiv.innerHTML = my awesome new div;

  document.getElementById(scroll-content).appendChild(newDiv);

});



var checkForNewDiv = function() {

  var lastDiv = document.querySelector(#scroll-content > div:last-child);

  var maindiv = document.querySelector(#scroll-content);

  var lastDivOffset = lastDiv.offsetTop + lastDiv.clientHeight;

  var pageOffset = maindiv.offsetTop + maindiv.clientHeight;



  if (pageOffset > lastDivOffset - 10) {

    var newDiv = document.createElement(div);

    newDiv.innerHTML = my awesome new div;

    document.getElementById(scroll-content).appendChild(newDiv);

    checkForNewDiv();

  }

};



checkForNewDiv();

JSFIDDLE DEMO