Lightweight Scrolling Plugin ScrollBooster
Add-ons
Plugin Description: ScrollBooster is a lightweight scrolling library. It implements drag-and-bounce effects on mobile devices and supports features such as restricting drag directions. It can be used with tables, images, and any other content.
Release Date: 2018-3-30 1:49
ScrollBooster is only 2 KB in size
Installation
You can install it through the npm package manager or simply remove the script tag directly:
1 | npm i scrollbooster |
Import the JS file
1 |
Usage
1 2 3 4 5 | import ScrollBooster from 'scrollbooster'let sb = new ScrollBooster({ viewport: document.querySelector('.viewport') // required // ...other options}) |
Options
| Option | Type | Default | Description |
|---|---|---|---|
| viewport | element | null | Viewport - outer element |
| content | element | First child of viewport element | Scrollable content inside the viewport |
| handle | element | Viewport element | Element that responds to drag events |
| bounce | boolean | true | Inertial bounce effect (allows scrolling beyond the viewport boundaries) |
| textSelection | boolean | false | Allows text selection |
| friction | float | 0.05 | Scroll friction factor (scrolling inertia after releasing the pointer) |
| bounceForce | float | 0.1 | Bounce effect factor |
| emulateScroll | boolean | false | Simulate viewport mouse wheel events (for cases where scrolling uses transform properties) |
| onUpdate | function | noop | User function that updates element properties based on received coordinates (see the demo example). Receives an object with the following properties: position, viewport, and content. Each property contains the measurements required to perform the actual scrolling |
Methods
| Method | Description |
|---|---|
| setPosition | Sets a new scroll position in the viewport. Receives an object with x and y properties |
| updateMetrics | Updates element dimensions. Useful for image loading or other dynamic content |
| getUpdate | Returns the current metrics and coordinates in the same format as onUpdate |
| destroy | Destroys event listeners for all instances |
Complete Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | let viewport = document.querySelector('.viewport')let content = document.querySelector('.viewport-content')let sb = new ScrollBooster({ viewport: viewport, content: content, handle: document.querySelector('.viewport-scroller'), bounce: true, textSelection: false, emulateScroll: false, onUpdate: (data)=> { content.style.transform = `translate( ${-data.position.x}px, ${-data.position.y}px )` // and also metrics: data.viewport['width'|'height'] and data.cotent['width'|'height'] }})// methods example:sb.updateMetrics()sb.setPosition({ x: 100, y: 100})sb.destroy() |
评论