div内的Javascript无限滚动

Posted 2023-03-04

【中文标题】div内的Javascript无限滚动

【英文标题】：Javascript Infinite Scroll inside a div

【发布时间】：2014-07-20 14:59:54

【问题描述】：

我正在尝试使用 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 会变成什么？

【问题讨论】：

lastInnerDiv.offsetTop + ... 和 outerDiv.offsetTop + ...

【参考方案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

【讨论】：

OP 指定了 div 包装器：quote .. in order to make the scrolling work inside a div ...

【参考方案2】：

最简单的。

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

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

【参考方案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/

【参考方案4】：

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

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

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

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

【参考方案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
    
;