div内的Javascript无限滚动

Question

我正在尝试使用 javascript 创建一个无限加载页面。我发现了这个:How to do infinite scrolling with javascript only without 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 会变成什么？

Answer 1

最简单的。

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

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