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: /

 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?

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/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?

• javascript
• jquery
• html
• css
• infinite-scroll

• lastInnerDiv.offsetTop + ... and outerDiv.offsetTop + ... – blgt Commented May 30, 2014 at 18:59

5 Answers 5

Simplest of them all.

var scrollY = container.scrollHeight - container.scrollTop;
var height = container.offsetHeight;
var offset = height - scrollY;

if (offset == 0 || offset == 1) {
    // load more content here
}

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

Wrap it within a div with overflow:auto and position:relative, so it will act as the body. Also remember to specify a height.

#wrapper {
    position: relative;
    overflow: auto;
    width: 300px;
    height: 300px;
}

Then, you must change the JS references that pointed to body or window, to the new wrapper div:

var wrapper = document.getElementById("wrapper");

wrapper.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 = wrapper.scrollTop + wrapper.clientHeight;

    //NOTE THAT PROPERTIES NAME ALSO CHANGED A BIT, FOR EXAMPLE:
    // pageYOffset -> scrollTop   and    innerHeight -> clientHeight

    if (pageOffset > lastDivOffset - 10) {
        var newDiv = document.createElement("div");
        newDiv.innerHTML = "my awesome new div";
        document.getElementById("scroll-content").appendChild(newDiv);
        checkForNewDiv();
    }
};

checkForNewDiv();

Here's the working fiddle: http://jsfiddle/8LpFR/1/

For achieving that behaviour you don't really need to be using the onScroll event, it does have a very bad performance hit: you want to be using the IntersectionObserver API instead.

All you need to do is place element/s and listen for when they bee available/unavailable in the screen. You only have to define a strategy on where and how you will display those items. You can customise the root element, define some rootMarging a threeshold... possibilites are endless :)

It's super easy to acplish and with very few lines you can have a custom performant scrolling feature.

I recently put together an article about infinite scrolling and this specific behaviour here if you are curious to know more with some examples

Based on TheRealChx101's answer. add a .onscroll listener to listen on this event.

container.onscroll = () => {
    const scrollY = container.scrollHeight - container.scrollTop;
    const height = container.offsetHeight;
    const offset = height - scrollY;

    if (offset == 0 || offset == 1) {
      // load more content here
    }
};