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