Javascript Infinite Scroll inside a div

问题

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?

回答1:

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

回答2:

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
}

回答3:

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.net/8LpFR/1/

来源：https://stackoverflow.com/questions/23961566/javascript-infinite-scroll-inside-a-div

标签

javascript

jquery

html

css

infinite-scroll