如何让无限滚动工作？答案

【问题标题】：How to get infinite scroll to work?如何让无限滚动工作？
【发布时间】：2014-01-07 12:46:29
【问题描述】：

我正在尝试让这个无限加载脚本在我的项目中工作。

这是我的 HTML：

<!-- Contents -->
<div id="page-container">
  <div id="scroller">
    <div id="page_1" class="pagina"></div>
    <div id="page_2" class="pagina"></div>
    <div id="page_3" class="pagina"></div>
    <div id="page_4" class="pagina"></div>
    <div id="page_5" class="pagina"></div>
    <div id="page_6" class="pagina"></div>
  </div>
</div>

<div id="pages-to-load">
  <div id="page_7" class="pagina"></div>
  ...
  <div id="page_25" class="pagina"></div>
</div>

这是脚本：

function scrollalert(){
  var pages = document.getElementById("scroller").getElementsByTagName("div");
  var currentPageId = pages[pages.length - 1];
  //console.log("currentPageId is: "+currentPageId);
  var scrollbox = document.querySelector('#page-container');
  var scrolltop = $(window).scrollTop();
  var scrollheight = scrollbox.scrollHeight;
  var windowheight = $(window).height();
  var scrolloffset=20;
  console.log(scrolltop);
  console.log(scrollheight);
  console.log(windowheight);
  console.log(scrollheight-(windowheight+scrolloffset));
  if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
    //fetch new items
    console.log("loading more pages");

    (function() {
      alert('test');
      var i;
      var pagesToLoad = $("#pages-to-load > div").size();
      for (i = 0; i < pagesToLoad; i++) {
        console.log(pagesToLoad[i].id);
        $.get(pagesToLoad[i].id, function(newitems){
          alert('get new page');
          $('#scroller').append(newitems);
          updatestatus();
        })
      };
    })();
  };
}

无论我尝试什么，我似乎都无法加载和附加我的新页面。向下滚动时，我的 scrollTop 和 scrollHeight 也不会改变。我确定我在这里遗漏了一些明显的东西。我的待加载页面也未定义？

【问题讨论】：

你能在这里复制问题吗：jsfiddle.net/cQ7vP ???
很奇怪。在小提琴中它似乎有效。我的应用程序的控制台显示 Uncaught TypeError: Cannot read property 'id' of undefined on the pages-to-load 变量。为什么会这样？
该函数在$(document).ready 函数中调用。将其替换为 $(scrollalert) 没有区别
是的，因为它是相同的行为。所以错误是另一回事。仅供参考， size() 已弃用，您应该改用：var pagesToLoad = $("#pages-to-load > div").length(); 但这不会解决您的问题。哪一行给你带来了错误？等等，pagesToLoad 应该是一个数字，所以你想在这里做什么？如我所见，应插入：pagesToLoad[i].id 使用：$("#pages-to-load > div").get(i).id
为什么它可以在 jsfiddle 中工作，但不能在我的应用程序中工作？我不知道我可以尝试解决这个问题

标签： javascript jquery infinite-scroll

【解决方案1】：

这是我的一个使用 JQuery 的无限滚动脚本：

HTML：

<html>
    <head>
    <title>Scroll Troll Page</title>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body>
    <div id="scrollbox">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
</body>

<script type="text/javascript">
    $(window).scroll(function () {
        //- 10 = desired pixel distance from the bottom of the page while scrolling)
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
        var box = $("#scrollbox");
    //Just append some content here
    box.html(box.html() + "<br /><br /><br /><br /><br /><br /><br />");
        }
});
</script>

排队：

box.html(box.html + "Place content to expand here");

您可以添加在滚动时到达页面底部时应添加到容器中的内容。

工作 jsFiddle：

http://jsfiddle.net/MdrJ4/3/

【讨论】：

【解决方案2】：

我认为我们应该依赖intersectionObserver 而不是onScroll 事件。我整理了一篇文章on medium here 解释了这两种方法的性能提升

你只需要原版js

【讨论】：

【解决方案3】：

我在使用无限滚动时遇到问题，所以我写了一个库并解决了我的问题。我认为这个库可以帮助你解决这个问题。使用这个库作为实现无限滚动的简单方法：

https://github.com/hamedtaheri32/infinite-scrolling

例子：

<script>
$(document).ready(function(){
    $(document).infiniteJscroll({
        offset:0,
        topOfPage:function(){
            console.log('Scrolled to Page Top');

        },
        bottomOfPage:function(){
            console.log('Scrolled to Page Bottom');
            addContent();
        },
        pageInit:function(){
           console.log('Initialize page');
            addContent();
        }
    });
});
//This method used for simulate loading data from server. replace it with AJAX loading method.
function addContent() {
    var c = '';
    for (var i = 0; i < 10; i++) {
        c += '<a class="box"></a>';
    }
    $("#post").append(c);
}

</script>

特点：

检测页面顶部
检测页面底部
可以使用偏移量来检测页面底部
有页面初始化方法
能够与 AJAX 加载页面混合

【讨论】：

在将您的解决方案粘贴到各处之前，请查看How to offer personal open-source libraries?。

【解决方案4】：

可以使用下面的脚本

window.onscroll = function (ev) {
    let scrollHeight = Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight,
        document.body.offsetHeight, document.documentElement.offsetHeight,
        document.body.clientHeight, document.documentElement.clientHeight
    );
    let currentScrollHeight = window.innerHeight + window.scrollY;

    if ((scrollHeight - currentScrollHeight) < 200) {
       // your statement
    }
};

full example in jsfiddle

【讨论】：

【解决方案5】：

这是我做的：（如果我错了，请纠正我）

$(document).ready(() => {
  var page = 1;
  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      page++;
      if (page == 2) {
        $('#div2').removeClass('hide');
      }
      if (page == 3) {
        $('#div3').removeClass('hide');
      }
      if (page == 4) {
        $('#div4').removeClass('hide');
        page = 1;
      }
    }
  });
});

.page {
  width: 100%;
  background-color: black;
  color: white;
  height: 100vh;
  border-top: 1px solid white;
}

.hide {
  display: none;
}

body {
  margin: 0px;
  padding: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Infinite Scroll</title>
  <link href='css/bootstrap.css' ref='stylesheet'>
</head>

<body>

  <div id='div' class='page'>
    <h1>Page 1</h1>
  </div>
  <div id='div2' class="page hide">
    <h1>Page 2</h1>
  </div>
  <div id='div3' class="page hide">
    <h1>Page 3</h1>
  </div>
  <div id='div4' class="page hide">
    <h1>Page 4</h1>
  </div>

  <script src='js/jquery.min.js'></script>
  <script src='js/popper.min.js'></script>
  <script src='js/bootstrap.min.js'></script>
  <script src='js/myjquery.js'></script>
</body>

</html>

【讨论】：

【解决方案6】：

// check if scrolling near to bootom of page , load more photos
window.addEventListener('scroll',()=>{
   if(window.innerHeight+window.scrollY>=document.body.offsetHeight-100){
       //your logic or function
   }
});

【讨论】：