Implementing an infinite scrolling feature using Javascript within a specified div element

Question

Implementing an infinite scrolling feature using Javascript within a specified div element

I'm currently working on implementing an infinite loading feature using JavaScript. I came across this helpful resource that explains how to achieve infinite scrolling without jQuery: How to do infinite scrolling with javascript only without jquery

After some experimentation, I've been focusing on the last answer provided in the thread which links to a jsfiddle demo: 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();

I'm now looking into adapting this code to enable scrolling within a specific div rather than the entire page. What changes would need to be made to the lastDivOffset and pageOffset variables for this modification?

javascript jquery html css infinite-scroll

Answer 1

Answer №1

The easiest solution of them all.

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

if (offset == 0 || offset == 1) {
    // add additional content dynamically
}

Answer 2

The easiest solution of them all.

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

if (offset == 0 || offset == 1) {
    // add additional content dynamically
}

Answer 3

Answer №2

Presented below is the solution that does not involve the creation of any new wrapper division.

document.getElementById("scroll-content").addEventListener("scroll", function(event) {
  var newElement = document.createElement("div");
  newElement.innerHTML = "A fantastic new element";
  document.getElementById("scroll-content").appendChild(newElement);
});

var verifyNewElement = function() {
  var lastElement = document.querySelector("#scroll-content > div:last-child");
  var mainContainer = document.querySelector("#scroll-content");
  var lastElementOffset = lastElement.offsetTop + lastElement.clientHeight;
  var pageOffset = mainContainer.offsetTop + mainContainer.clientHeight;

  if (pageOffset > lastElementOffset - 10) {
    var newElement = document.createElement("div");
    newElement.innerHTML = "A fantastic new element";
    document.getElementById("scroll-content").appendChild(newElement);
    verifyNewElement();
  }
};

verifyNewElement();

JSFIDDLE DEMO

Answer 4

Presented below is the solution that does not involve the creation of any new wrapper division.

document.getElementById("scroll-content").addEventListener("scroll", function(event) {
  var newElement = document.createElement("div");
  newElement.innerHTML = "A fantastic new element";
  document.getElementById("scroll-content").appendChild(newElement);
});

var verifyNewElement = function() {
  var lastElement = document.querySelector("#scroll-content > div:last-child");
  var mainContainer = document.querySelector("#scroll-content");
  var lastElementOffset = lastElement.offsetTop + lastElement.clientHeight;
  var pageOffset = mainContainer.offsetTop + mainContainer.clientHeight;

  if (pageOffset > lastElementOffset - 10) {
    var newElement = document.createElement("div");
    newElement.innerHTML = "A fantastic new element";
    document.getElementById("scroll-content").appendChild(newElement);
    verifyNewElement();
  }
};

verifyNewElement();

JSFIDDLE DEMO

Answer 5

Answer №3

Surround it with a div that has overflow:auto and position:relative, so it can function as the main body. Don't forget to set a specific height.

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

Next, update the JavaScript references that targeted the body or window to point 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;

    //PLEASE NOTE THAT SOME PROPERTY NAMES HAVE BEEN CHANGED SLIGHTLY, 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();

Check out the working example here: http://jsfiddle.net/8LpFR/1/

Answer 6

Surround it with a div that has overflow:auto and position:relative, so it can function as the main body. Don't forget to set a specific height.

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

Next, update the JavaScript references that targeted the body or window to point 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;

    //PLEASE NOTE THAT SOME PROPERTY NAMES HAVE BEEN CHANGED SLIGHTLY, 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();

Check out the working example here: http://jsfiddle.net/8LpFR/1/

Answer 7

Answer №4

To achieve the desired functionality, there's no need to rely on the onScroll event, as it can negatively impact performance. Instead, consider utilizing the IntersectionObserver API.

All you have to do is insert elements and monitor their visibility on the screen. You just need to devise a plan for displaying these items effectively. You can customize the root element, set a rootMargin, adjust the threshold... the options are limitless :)

It's straightforward to implement, and with minimal code, you can create a tailored and efficient scrolling feature.

If you're interested in learning more about infinite scrolling and this particular behavior, I recently published an article on the topic with examples here.

Answer 8

To achieve the desired functionality, there's no need to rely on the onScroll event, as it can negatively impact performance. Instead, consider utilizing the IntersectionObserver API.

All you have to do is insert elements and monitor their visibility on the screen. You just need to devise a plan for displaying these items effectively. You can customize the root element, set a rootMargin, adjust the threshold... the options are limitless :)

It's straightforward to implement, and with minimal code, you can create a tailored and efficient scrolling feature.

If you're interested in learning more about infinite scrolling and this particular behavior, I recently published an article on the topic with examples here.

Answer 9

Answer №5

Referencing TheRealChx101's insightful contribution, it is advised to attach a .onscroll handler to effectively monitor this specific occurrence.

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

    if (offset == 0 || offset == 1) {
      // implement additional content loading mechanism here
    }
};

Answer 10

Referencing TheRealChx101's insightful contribution, it is advised to attach a .onscroll handler to effectively monitor this specific occurrence.

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

    if (offset == 0 || offset == 1) {
      // implement additional content loading mechanism here
    }
};

Implementing an infinite scrolling feature using Javascript within a specified div element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Adjust the default margins and padding of email header images specifically for Outlook emails

Why won't the CSS update in Next.js when the local state variable changes on page load?

Optimal method for implementing $scope.$apply(); or $scope in scenarios outside of Angular when working with Angular Components

Use Javascript to set cookies and remember the show state when clicked

Is it possible to target the HTML element or root node using the nth-child selector?

What could be causing the error message 'Alias configuration for Field browser is not valid' to appear when attempting to compile SCSS using Webpack through the terminal?

What is the best way to integrate a new unique identifier into an existing MongoDB document using NodeJS?

What is the best way to retrieve data from init.js and use it in messageView?

Javascript 'break' statement is always executed

Tips for transforming this jquery script into "vanilla" javascript

Why does console.log in JavaScript exhibit different behaviors as evidenced by the code?

Separators can be implemented to enhance the visual distinction between arrow icons and text within

What Makes Sports Illustrated's Gallery Pages Load So Quickly?

Tips for interpreting a JSON object that has been returned

Trouble with Fetching Data by ID in MongoDB 2.0.0 Driver

comprehending the concept of express and mastering its usage

Help Needed: Adding a Simple Element to jQuery Tabs Script

``When executing the `npm install` command, it does not install the sub-dependencies of a local package

Module 'esprima' not found

Ways to determine the number of overlapping elements and adjust their widths