jquery-infinite-scroller 是一款基于 jQuery 的无限滚动插件，它可以优美地实现此类需求，让网站的用户体验更佳，本文将带你深入了解这个 npm 包，并为你提供详细的使用教程和示例。
什么是 jquery-infinite-scroller
jquery-infinite-scroller 是一款轻量级的 JS 插件，提供了一个简单的方式去等待新数据的到来，把它们添加到关联的容器中，从而实现了无限滚动的效果，这个插件非常适用于那些需要加载大量数据的网站。
安装
使用 jQuery 和 jquery-infinite-scroller 最快速的方式便是使用 npm 进行安装：
npm install --save jquery jquery-infinite-scroller
需要注意的是，使用 jquery-infinite-scroller 前需要先安装 jQuery。
使用
考虑一个简单的例子，假设我们的网页需要加载一些数据并且需要能够自动加载很多页的新数据。
首先在页面头部引入 jQuery 和 jquery-infinite-scroller：
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="./node_modules/jquery-infinite-scroller/jquery.infinite-scroller.min.js"></script>
</head>然后，我们需要在页面中具有滚动（或者其他可以激活滚动事件的地方）的容器：
<div id="container"> ... </div>
接下来，我们需要设置一些数据源的信息，例如：
-- -------------------- ---- -------
--- ------- - -
------------- --------
------------ -------------
---------------- -------------
------ -----
--------- -------
-------- --
----- -------------------- -
------ -------------- - ---------- - --------
-
--具体参数的含义如下：
itemSelector- 用来识别新数据的元素，类型 String。navSelector- 用来选择下一页的 DOM 元素，类型 String。contentSelector- 用来将新数据添加到 DOM 中的 DOM 元素容器，类型 String。debug- 是否启用调试模式，类型 Boolean。dataType- HTML, XML, JSON, or JSONP 的数据类型，类型 String。maxPage- 加载的页面最大数量，类型 Number。path- 返回下一页数据 URL 的回调函数，类型 Function。
接着，我们只需要应用到 DOM 中即可（注意，这是一个异步方法）：
$('#container').infiniteScroll(options);这位你的网页产生了一个底部的 pager，滚动到底部就会自动加载数据！
总结
jquery-infinite-scroller 插件给我们提供了一种快速简便的无限滚动实现方式，通过上文的示例可以看到，这个插件非常易用，而且具有很高的可定制化程度，你可以根据自己的需求去进行参数和回调函数的设置，希望这篇文章能起到指导和帮助的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005578881e8991b448d484d