综合示例

为允许滚动的元素启用滚动监听之后,会根据滚动的操作为元素添加辅助类。

较多的内容用来测试滚动。

尝试滚动此区域。

尝试滚动此区域。

尝试滚动此区域。

尝试滚动此区域。

尝试滚动此区域。

尝试滚动此区域。

尝试滚动此区域。

尝试滚动此区域。

尝试滚动此区域。

尝试滚动此区域。

辅助类说明:

使用方法

window 对象已自动启用滚动监听,辅助类会添加在 <body> 上。

.listen-scroll

通过为元素添加 .listen-scroll 来监听元素的滚动事件。

<div class="listen-scroll"></div>
$().listenScroll()
$('scrollDiv').listenScroll();
选项
container

有效的 CSS 选择器,决定辅助类被添加到的元素上,默认不设定此值,此时辅助类会被添加到滚动元素自身上。

设定为特殊值 'parent',辅助类会被添加到滚动元素的父级元素上。

handleInterval

设定一个时间,单位毫秒,默认为 100,当用户滚动时,小于此时间的滚动事件会被忽略,用于提高性能,避免重复计算。

inScrollClass

设定辅助类,默认值为 in-scroll

directionClass

设定指示滚动方向的辅助类前缀,默认为 scroll

canScrollClass

设定辅助类,默认值为 can-scroll

事件
listenScroll

当滚动状态发生变化时触发。

该事件回调函数拥有三个参数:

// 使用选项来指定事件回调函数
$('#scrollDiv').listenScroll({
    listenScroll: function(isInScroll, scrollDirection, scrollTop) {
        // 处理滚动状态变化
    }
});
// 使用 $().on() 绑定事件
$('#scrollDiv').on('listenScroll', function(isInScroll, scrollDirection, scrollTop) {
    // 处理滚动状态变化
});