更新记录
1.0.1(2022-05-18)
下载此版本
v1.0.1
功能更新
- 支持滚动容器,单击和长按事件回调
- 滚动事件,新增返回event事件
- 修复插件destroy,还能继续滚动
1.0.0(2021-02-08)
下载此版本
- 目前仅支持:web-h5
- 滚动元素的父节点(即滚动容器), overflow 字段必须为 hidden.
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.15 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
el-scroll
自定义元素滚动插件。
- 滚动元素的父节点(即滚动容器), overflow 字段必须为 hidden.
Install
npm i el-scroll or yarn add el-scroll
Useage
import ElScroll from 'el-scroll'
let scroller = new ElScroll('#J_scroll');
//events
scroller.on('scroll', ({ctx, dist, event})=>{
console.log('scrolling and scrollY is ', dist);
});
scroller.on('beforeScrollEnd', ({ctx, dist, event})=>{
console.log('before scrolling stops and scrollY is ', dist);
//Returns a negative number that determines where the final scrolling stops.
return dist;
});
scroller.on('scrollEnd', ({ctx, dist, event})=>{
console.log('scrolling stops and scrollY is ', dist);
});
scroller.on('tap', ({ctx, event})=>{
console.log('tap event', event);
});
scroller.on('longPress', ({ctx, event})=>{
console.log('longPress event', event);
});
scroller.on('destroy', ()=>{
console.log('destroy callback');
});
examples
字段 |
类型 |
是否必须 |
默认值 |
描述 |
options |
String |
yes |
-- |
滚动元素的id或class. |
字段 |
类型 |
是否必须 |
默认值 |
描述 |
options |
HTMLDivElement |
yes |
-- |
滚动元素-HTMLDivElement. |
字段 |
类型 |
是否必须 |
默认值 |
描述 |
options.el |
HTMLDivElement |
yes |
-- |
滚动元素-HTMLDivElement. |
options.longPressTime |
Number |
-- |
350 |
长按时间间隔 |
options.stopDefaultEvent |
Boolean |
-- |
true |
是否阻止浏览器的默认事件,比如:点击、长按等 |
方法 |
描述 |
scroller.on('scroll', callback) |
滚动事件回调. |
scroller.on('beforeScrollEnd', callback) |
滚动停止前回调,在该回调返回一个(负数)值,可控制最终停止位置. |
scroller.on('scrollEnd', callback) |
滚动停止回调. |
scroller.on('tap', callback) |
单击回调. |
scroller.on('longPress', callback) |
长按回调. |
scroller.on('destroy', callback) |
插件销毁回调. |
scroller.destroy() |
插件销毁. |
scroller.resetMaxScrollY() |
当滚动元素的高度发生变化,需调用此函数,来重置可滚动的scrollY值. |