Enjoyable content drag-to-scroll micro (~2KB gzipped) library.
You can install it via npm package manager or just drop a script tag:
npm i scrollbooster<script src="https://unpkg.com/[email protected]/dist/scrollbooster.min.js"></script>import ScrollBooster from 'scrollbooster'
let sb = new ScrollBooster({
viewport: document.querySelector('.viewport') // required
// ...other options
})| Option | Type | Default | Description |
|---|---|---|---|
| viewport | element | null | Viewport - outer element |
| content | element | First child of viewport element | Scrollable content inside viewport |
| handle | element | Viewport element | Element that respond to drag event |
| bounce | boolean | true | Inertia bounce effect (scroll past viewport borders) |
| textSelection | boolean | false | Ability to select text content |
| friction | float | 0.05 | Scroll friction factor (scroll inertia after pointer release) |
| bounceForce | float | 0.1 | Bounce effect factor |
| emulateScroll | boolean | false | Emulate viewport mouse wheel events (for cases when scrolling with transform property) |
| onUpdate | function | noop | User function that updates element properties according to received coordinates (see demo examples). Receives object with properties: position, viewport and content. Each property contains metrics to perform an actual scrolling |
| Method | Description |
|---|---|
| setPosition | Sets new scroll position in viewport. Receives an object with properties x and y |
| updateMetrics | Updates element sizes. Useful for images loading or other dynamic content |
| getUpdate | Returns current metrics and coordinates in a same format as onUpdate |
| destroy | Destroys all instance's event listeners |
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()ScrollBooster has been tested in IE 11, Edge and other modern browsers (Chrome, Firefox, Safari).
David DeSandro for his talk "Practical UI Physics".
MIT License (c) Ilya Shubin
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent