1.0.1 • Published 2 years ago
el-scroll
A plugin that can makes element scrolling smooth.
- The parent element of scrolling target, overflow fields must be 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
Configuration
- let scroller = new ElScroll(options)
- options(String)
| param | type | require | default | desc |
|---|
| options | String | yes | -- | scroll target id or class. |
| param | type | require | default | desc |
|---|
| options | HTMLDivElement | yes | -- | scroll target HTMLDivElement. |
| param | type | require | default | desc |
|---|
| options.el | HTMLDivElement | yes | -- | scroll target HTMLDivElement. |
| options.longPressTime | Number | -- | 350 | the interva of long press. |
| options.stopDefaultEvent | Boolean | -- | true | stop browser default events. |
| method | desc |
|---|
| scroller.on('scroll', callback) | scroll event callback. |
| scroller.on('beforeScrollEnd', callback) | before scrolling stops callback, and you can return a negative number that determines where the final scrolling stops. |
| scroller.on('scrollEnd', callback) | scrolling stops callback. |
| scroller.on('tap', callback) | tap callback. |
| scroller.on('longPress', callback) | long press callback. |
| scroller.on('destroy', callback) | destroy callback. |
| scroller.destroy() | plugin destroy. |
| scroller.resetMaxScrollY() | When the scrolling target height changes, reset the scrollable scrollY. |