无法安装无限卷轴

Question

花了几个小时尝试实施 Infinite Scroll in the blog. The goal is simple, the main page is too long, I want it to load gradually. The authors of the plugin have a perfectly working example，但是，无论我做什么，就我而言，插件都无法正常工作。我想我错过了什么。

如果我没理解错的话，插件是这样工作的：我们在里面创建一个公共 div 和文章。当进入一个页面时，一个人看到第一篇文章，当他向下滚动到下一篇文章时，页面被放大并且已经显示了 2 篇文章，等等。好像是我在做的。

我尝试通过 link

附加它

<script src = "https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"> </ script>

已尝试将文件上传到服务器

<script src = "js/infinite-scroll.pkgd.min.js"> </script>

我尝试按照文档中的建议通过 jQuery、JavaScript 和 html 自行制作元素，但都没有成功。

这是一个 link 到我尝试实现它的站点的一个非常简单的页面：https://dinarkino.ru/new。目前，所有段落都被一次加载，尽管每个段落都包含在单独的

<article class = "post"> ... </ article>

非常感谢您的帮助！

Answer 1

确保您是运行来自 http// 地址的页面，如果您是运行来自本地文件的页面，则无限滚动将不起作用。我使用 node、npm 和 express 设置了一个本地环境，看起来像这样......

var express = require("express");


var PORT = 8080;
var app = express();
app.use(express.static("public"))






app.listen(PORT, function(){
    console.log("App listening on PORT: " + PORT)
})

所以我的文件夹结构是这样的

. ├── node_modules │<br> ├── public │ |── page1.html │ |__ page2.html │ |__ page3.html │ ├── server.js │

您要加载的每个部分都必须是其自己的 .html 文件。所以正文 page1.html 看起来像这样。我更改了您的代码以包含容器内的 div 用于保存帖子，并将 data-infinite-scroll 属性赋予 div .posts-feed。然后我搬了这个

 <div class="scroller-status">
            <div class="loader-ellips infinite-scroll-request">
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
            </div>
            <p class="scroller-status__message infinite-scroll-last">End of content</p>
            <p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
          </div>

            <p class="pagination">
              <a class="pagination__next" href="page2.html">Next page</a>
            </p>

在容器内。

<body>
  <div class="main">
    <div class="container" >
        <div class ="posts-feed" data-infinite-scroll='{ "path": ".pagination__next", "append": ".post", "status": ".scroller-status", "hideNav": ".pagination"}' >

        <article class="post">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit in sem eu elementum. Nam sagittis eleifend aliquam. Cras viverra, sapien vel auctor viverra, augue leo commodo ipsum, id euismod elit nisl id felis. Integer vitae mauris est. Cras vitae varius tortor. Nullam tristique ullamcorper imperdiet. Suspendisse potenti. Donec in elit felis. Donec eget nunc porttitor, lobortis lectus id, sagittis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae ornare purus. Sed augue purus, cursus in malesuada non, interdum molestie massa. In interdum nisi at purus gravida rutrum. Praesent finibus lacus ac imperdiet tincidunt.</p>
        <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
        </article>



    </div>

      <div class="scroller-status">
            <div class="loader-ellips infinite-scroll-request">
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
              <span class="loader-ellips__dot"></span>
            </div>
            <p class="scroller-status__message infinite-scroll-last">End of content</p>
            <p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
          </div>

            <p class="pagination">
              <a class="pagination__next" href="page2.html">Next page</a>
            </p>
      </div>
</div>


</body>

注意最后有一个看起来像这样的片段

<p class="pagination">
     <a class="pagination__next" href="page2.html">Next page</a>
</p>

这是告诉无限滚动接下来要在 href 中加载什么。这将在此处加载名为 page2.html

的单独文件中的内容

然后一个 page2.html 同一部分应该读作

<p class="pagination">
   <a class="pagination__next" href="page3.html">Next page</a>
</p>

以便加载 page3.html 内容。

无法安装无限卷轴

Can't install Infinite Scroll

html

scroll

blogs

infinite-scroll

endlessscroll