jScroll 无限滚动的 jQuery 插件

Question

jScroll 是一个用于无限滚动的 jQuery 插件，当滚动到底部就触发预定义的一个点击事件加载下一页，是在当前页面或内容区域滚动时通过 Ajax 加载内容的能力。新内容可以在每次滚动到现有内容的末尾时自动加载，也可以通过单击现有内容末尾的导航链接来触发加载。

安装

依赖性

jScroll 需要 jQuery v1.8.0 或更高版本。

CDN

Unpkg

将脚本包含在 unpkg 具有指定的版本号，其中 #.#.# 表示版本。

<script src="//unpkg.com/jscroll@#.#.#/dist/jquery.jscroll.min.js"></script>

或者，您可以省略 Version 标记来加载最新发布的版本。

<script src="//unpkg.com/jscroll/dist/jquery.jscroll.min.js"></script>

CDNJS

将脚本包含在 CNDJS 有指定的版本号，其中 #.#.# 表示版本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/#.#.#/jquery.jscroll.min.js"></script>

包管理器

NPM

$ npm install jscroll --save

Yarn

$ yarn add jscroll

Bower

$ bower install jscroll --save

使用

初始化

这个 jscroll 方法在选择器上调用，其中包含可滚动内容。始终确保在初始化 jScroll 之前已经在 DOM 中呈现了要调用 jScroll 的内容，初始化jScroll DOMContentLoaded 活动：

$(function() {
    $('.jscroll').jscroll();    
});

定制化

这个 jscroll 方法将可选对象文字作为重写默认选项的参数。下面是如何做到这一点的一个例子。

var options = {
    loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...',
    padding: 20,
    nextSelector: 'a.jscroll-next:last',
    contentSelector: 'li'
};

$('.jscroll').jscroll(options);

看见配置所有选项的列表。

配置

debug

• 类型：Boolean
• 违约：false

当设置为 true，则将有用信息输出到控制台显示，如果 console 对象存在。

autoTrigger

• 类型：Boolean
• 违约：true

当设置为 true，当用户滚动到包含元素的底部时，将自动触发下一组内容的加载。当设置为false，所需的下一个链接将在单击时触发下一组内容的加载。

autoTriggerUntil

• 类型：Boolean|Number
• 违约：false

设置为大于0关掉autoTrigger在指定的页数之后分页。要求autoTrigger成为true.

loadingHtml

• 类型：String
• 违约：<small>Loading...</small>

在加载下一组内容时显示在内容底部的HTML。

loadingFunction

• 类型：Function|Boolean
• 违约：false

后面运行的JavaScript函数。loadingHtml 已经画出来了。

padding

• 类型：Number
• 违约：0

与可滚动内容底部的距离，在此位置触发下一组内容的加载。这只在下列情况下才适用autoTrigger设置为true.

nextSelector

• 类型：String
• 违约：a:last

用于查找包含href指向下一组内容。如果找不到此选择器，或者如果它不包含href属性时，jScroll将从调用它的元素中自行销毁和解除绑定。

contentSelector

• 类型：String
• 违约：''

仅在下一组内容的响应中加载部分内容的方便选择器。如果为空，则忽略此选择器，并将整个响应应用于DOM。

更多信息：contentSelector选项及其加载响应片段的方式，请参阅 .load() 方法的 jQuery 文档.

pagingSelector

• 类型：String
• 违约：''

还可以为分页控件定义选择器，以便隐藏它们，而不只是隐藏下一个页面链接。

callback

• 类型：Function|Boolean
• 违约：false

还可以定义在加载了一组内容之后调用的回调函数。

相关链接

• Github：https://github.com/pklauzinski/jscroll
• 官网：https://jscroll.com