javascript - 基本的无限滚动/延迟加载纯JavaScript博客文章

我正在寻找一个轻量级的解决方案（希望没有jQuery，但我愿意接受建议）来“延迟加载”一个较长的HTML页面，该页面索引了客户端上的大量博客文章。现有的大多数解决方案都面向AJAX，以从服务器端加载数据或处理分页。我需要找到可以与单个长页面一起工作的东西，而这个长页面完全在客户端无限滚动地加载。

因此，HTML如下所示：

    <div id="blog-post">
      <h2 class="post-title">Cupcake ipsum.</h2>
      <img class="post-image" src="img/posts/cupcakeIpsum.jpg">
      <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
      <hr>
    </div>

这个相同的摘录基本上一次又一次地重复相同的方式。我基本上想在开头显示3个博客文章，一旦滚动到达视口的底部，我想再公开一组3个博客文章。

关于如何使用纯JavaScript实现此目标的任何想法？ （可能是ES6。）

最佳答案

您可能需要在attr div中添加一些#blog-post。像visible类或其他类似的东西（顺便说一句，在div中添加id重复是个好主意。您的脚本通常会失败，并且仅适用于第一项。您需要使用class而不是id）。

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
      // you're at the bottom of the page
      // console.log("Bottom of page");

      var posts = document.querySelectorAll('.blog-post:not(.visible)');

      for(i = 0; i < posts.length; i++){
        if(posts[i] != undefined && i < 3){
            posts[i].className += "visible";
        }
      }
    }
};

.blog-post{
  /*display:none;*/
  opacity:0;
  transition: opacity 5s;
}

.visible{
  /*display:block !important;*/
  opacity:1;
}

<div class="blog-post visible">
      <h2 class="post-title">Cupcake ipsum.</h2>
      <img class="post-image" src="http://placehold.it/350x150">
      <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
      <hr>
</div>
<div class="blog-post">
      <h2 class="post-title">Cupcake ipsum.</h2>
      <img class="post-image" src="img/posts/cupcakeIpsum.jpg">
      <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
      <hr>
</div>
<div class="blog-post">
      <h2 class="post-title">Cupcake ipsum.</h2>
      <img class="post-image" src="img/posts/cupcakeIpsum.jpg">
      <p class="preview">Cupcake ipsum dolor sit. Amet bear claw marzipan tootsie roll.</p>
      <hr>
</div>

滚动方法取自并经过测试：https://stackoverflow.com/a/31264162/2259466

注意：转换未按我的代码预期的那样进行。您也不需要使用显示，但不能同时使用动画（您可以使用动画，但是需要解决方法）。或者，您可以更难地使用js中的动画。

因此，一般而言，代码需要看起来像它。我知道它尚未完成，但希望它能给您带来灵感。