Javascript Бесконечная прокрутка внутри div

Я пытаюсь создать бесконечную страницу загрузки с использованием javascript. Я нашел это: Как сделать бесконечную прокрутку только с javascript без jquery

Я играл с последним ответом, который ссылается на эту страницу jsfiddle: 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();

Как бы я изменил это, чтобы заставить прокрутку работать внутри div, а не как всю страницу? Например, на что изменится lastDivOffset и pageoffset?

3 2
javascript html css jquery infinite-scroll

3 ответа:

Вот решение без создания какого-либо нового подразделения оболочки.

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

2

Оберните его в div с overflow:auto и position:relative, чтобы он действовал как тело. Также не забудьте указать высоту.

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

Затем необходимо изменить ссылки JS, указывающие на тело или окно, на новую оболочку 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();

Вот рабочая скрипка: http://jsfiddle.net/8LpFR/1/

0

Самый простой из всех.

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

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