Javascript 如何编写一个特殊的无止境卷轴网站？

我检查了很多无休止的滚动脚本，对其中任何一个都不满意

我想要的通常是：

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        //same HTML document starts again without reloading
    }
};

---

如何对此进行编码？

您可以使用

IntersectionObserver

在视图即将结束时获得通知，以继续加载更多内容，即无限滚动，即您想要实现的内容

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

let observer = new IntersectionObserver(callback, options);

let target = document.querySelector('#listItem');
observer.observe(target);

---

要获得完整的指南，请查看非常详细的

，前提是您正在使用React JS或计划使用它，并且您关心的是性能

您可以查看此库，这样它将只高效地渲染窗口视图上的库：

-如果您检查这个沙盒上的元素列表，您将看到前面的列表集已从dom中删除，这使得您的站点不会变慢，尽管您以前加载了太多数据

---

它与仅供参考的

密切相关：IE和safari<12不支持此API。如果你需要这些浏览器的支持，这里是官方的polyfill Hi，谢谢你的回答。你能把它写成完整的代码吗？你可以用你提供的代码来编码，但是你需要考虑到你还需要限制滚动事件，还要考虑调整大小（用户旋转屏幕，现在它处于横向模式，所以屏幕高度已经改变）