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

这是没有创建任何新包装器的解决方案。

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

Answer 2

最简单的一切。

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

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

Answer 3

将其包裹在overflow:auto和position:relative的div中，因此它将充当正文。还要记得指定一个高度。

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

然后，您必须将指向body或window的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/

Answer 4

为了实现该行为，您实际上并不需要使用 onScroll 事件，它确实对性能造成了非常糟糕的影响：您想改用 IntersectionObserver API。

您需要做的就是放置元素并监听它们何时在屏幕上可用/不可用。您只需要定义一个关于在何处以及如何显示这些项目的策略。您可以自定义 root 元素，定义一些 rootMarging 和 threeshold ... 可能性是无穷无尽的 :)

它非常容易完成，只需很少的行，您就可以拥有自定义的高性能滚动功能。

如果您想通过一些示例了解更多信息，我最近整理了一篇关于无限滚动和这种特定行为的文章here

Answer 5

基于 TheRealChx101 的 answer。添加 .onscroll 侦听器以侦听此事件。

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
    }
};

Javascript Infinite Scroll in div

5 个答案: