为允许滚动的元素启用滚动监听之后,会根据滚动的操作为元素添加辅助类。
较多的内容用来测试滚动。
尝试滚动此区域。
尝试滚动此区域。
尝试滚动此区域。
尝试滚动此区域。
尝试滚动此区域。
尝试滚动此区域。
尝试滚动此区域。
尝试滚动此区域。
尝试滚动此区域。
尝试滚动此区域。
辅助类说明:
.can-scroll
,当前元素能够进行滚动操作(出现滚动条);.in-scroll
,当前元素已向下滚动,即滚动条距离顶部大于 0;.scroll-down
,当前(滚动时)或上一次(没有滚动时)的滚动操作是向下滚动;.scroll-up
,当前(滚动时)或上一次(没有滚动时)的滚动操作是向上滚动;.scroll-over
,已滚动到最底部。window
对象已自动启用滚动监听,辅助类会添加在 <body>
上。
通过为元素添加 .listen-scroll
来监听元素的滚动事件。
<div class="listen-scroll"></div>
$('scrollDiv').listenScroll();
有效的 CSS 选择器,决定辅助类被添加到的元素上,默认不设定此值,此时辅助类会被添加到滚动元素自身上。
设定为特殊值 'parent'
,辅助类会被添加到滚动元素的父级元素上。
设定一个时间,单位毫秒,默认为 100
,当用户滚动时,小于此时间的滚动事件会被忽略,用于提高性能,避免重复计算。
设定辅助类,默认值为 in-scroll
。
设定指示滚动方向的辅助类前缀,默认为 scroll
。
设定辅助类,默认值为 can-scroll
。
当滚动状态发生变化时触发。
该事件回调函数拥有三个参数:
isInScroll
,滚动条距离顶部是否大于 0;scrollDirection
,当前滚动的方向,'up'
或 'down'
;scrollTop
,滚动条距离顶部的距离。// 使用选项来指定事件回调函数
$('#scrollDiv').listenScroll({
listenScroll: function(isInScroll, scrollDirection, scrollTop) {
// 处理滚动状态变化
}
});
// 使用 $().on() 绑定事件
$('#scrollDiv').on('listenScroll', function(isInScroll, scrollDirection, scrollTop) {
// 处理滚动状态变化
});