ilyashubin / Scrollbooster
Licence: mit
Enjoyable content drag-to-scroll library
Stars: ✭ 775
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Scrollbooster
React Indiana Drag Scroll
React component which implements scrolling via holding the mouse button or touch
Stars: ✭ 190 (-75.48%)
Mutual labels: library, drag, scroll
Plain Draggable
The simple and high performance library to allow HTML/SVG element to be dragged.
Stars: ✭ 362 (-53.29%)
Mutual labels: drag, draggable
Swiftuix
Extensions and additions to the standard SwiftUI library.
Stars: ✭ 4,087 (+427.35%)
Mutual labels: library, scroll
Svelte Grid
A responsive, draggable and resizable grid layout, for Svelte.
Stars: ✭ 473 (-38.97%)
Mutual labels: drag, draggable
use-gesture
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
Stars: ✭ 6,624 (+754.71%)
Mutual labels: drag, scroll
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-97.29%)
Mutual labels: drag, draggable
Vue Draggable Resizable Gorkys
Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线
Stars: ✭ 521 (-32.77%)
Mutual labels: drag, draggable
Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+2950.45%)
Mutual labels: drag, draggable
Navigation Toolbar
Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
Stars: ✭ 587 (-24.26%)
Mutual labels: library, scroll
el-table-draggable
让element-ui的table可拖动排序,支持 行,列,跨表格等特性
Stars: ✭ 68 (-91.23%)
Mutual labels: drag, draggable
vue-sortable-tree
vue tree draggable, drag item sort
Stars: ✭ 87 (-88.77%)
Mutual labels: drag, draggable
v-drag
The simplest way to integrate dragging on Vue.js
Stars: ✭ 71 (-90.84%)
Mutual labels: drag, draggable
Ngx Sortablejs
Angular 2+ binding to SortableJS. Previously known as angular-sortablejs
Stars: ✭ 397 (-48.77%)
Mutual labels: drag, draggable
Android Dragdismissactivity
A smooth, easy-to-implement, drag to dismiss Android Activity.
Stars: ✭ 682 (-12%)
Mutual labels: library, drag
draggable-polyfill
🌈a beautify polyfill for native drag!
Stars: ✭ 49 (-93.68%)
Mutual labels: drag, draggable
drag-to-close
Android library that provides a view group which allows to finish an activity by dragging a view.
Stars: ✭ 69 (-91.1%)
Mutual labels: drag, draggable
React Use Gesture
👇Bread n butter utility for component-tied mouse/touch gestures in React and Vanilla Javascript.
Stars: ✭ 5,704 (+636%)
Mutual labels: drag, scroll
ScrollBooster
Enjoyable drag-to-scroll micro library (~2KB gzipped). Supports smooth content scroll via mouse/touch dragging, trackpad or mouse wheel. Zero dependencies.
Easy to setup yet flexible enough to support any custom scrolling logic.
Installation
You can install it via npm
or yarn
package manager or via script
tag:
npm i scrollbooster
yarn add scrollbooster
<script src="https://unpkg.com/[email protected]/dist/scrollbooster.min.js"></script>
Usage
The most simple setup with default settings:
import ScrollBooster from 'scrollbooster';
new ScrollBooster({
viewport: document.querySelector('.viewport'),
scrollMode: 'transform'
});
Please note that in order to support IE11 you should replace arrow functions and string templates from code examples to supported equivalents or just use Babel.
Options
Option | Type | Default | Description |
---|---|---|---|
viewport | DOM Node | null | Content viewport element (required) |
content | DOM Node | viewport child element | Scrollable content element inside viewport |
scrollMode | String | undefined | Scroll technique - via CSS transform or natively. Could be 'transform' or 'native' |
direction | String | 'all' | Scroll direction. Could be 'horizontal', 'vertical' or 'all' |
bounce | Boolean | true | Enables elastic bounce effect when hitting viewport borders |
textSelection | Boolean | false | Enables text selection inside viewport |
inputsFocus | Boolean | true | Enables focus for elements: 'input', 'textarea', 'button', 'select' and 'label' |
pointerMode | String | 'all' | Specify pointer type. Supported values - 'touch' (scroll only on touch devices), 'mouse' (scroll only on desktop), 'all' (mobile and desktop) |
friction | Number | 0.05 | Scroll friction factor - how fast scrolling stops after pointer release |
bounceForce | Number | 0.1 | Elastic bounce effect factor |
emulateScroll | Boolean | false | Enables mouse wheel/trackpad emulation inside viewport |
preventDefaultOnEmulateScroll | String | false | Prevents horizontal or vertical default when emulateScroll is enabled (eg. useful to prevent horizontal trackpad gestures while enabling vertical scrolling). Could be 'horizontal' or 'vertical'. |
lockScrollOnDragDirection | String | false | Detect drag direction and either prevent default mousedown /touchstart event or lock content scroll. Could be 'horizontal', 'vertical' or 'all' |
dragDirectionTolerance | Number | 40 | Tolerance for horizontal or vertical drag detection |
onUpdate | Function | noop | Handler function to perform actual scrolling. Receives scrolling state object with coordinates |
onClick | Function | noop | Click handler function. Here you can, for example, prevent default event for click on links. Receives object with scrolling metrics and event object. Calls after each click in scrollable area |
onPointerDown | Function | noop |
mousedown /touchstart events handler |
onPointerUp | Function | noop |
mouseup /touchend events handler |
onPointerMove | Function | noop |
mousemove /touchmove events handler |
onWheel | Function | noop |
wheel event handler |
shouldScroll | Function | noop | Function to permit or disable scrolling. Receives object with scrolling state and event object. Calls on pointerdown (mousedown, touchstart) in scrollable area. You can return true or false to enable or disable scrolling |
List of methods
Method | Description |
---|---|
setPosition | Sets new scroll position in viewport. Receives an object with properties x and y
|
scrollTo | Smooth scroll to position in viewport. Receives an object with properties x and y
|
updateMetrics | Forces to recalculate elements metrics. Useful for cases when content in scrollable area change its size dynamically |
updateOptions | Sets option value. All properties from Options config object are supported |
getState | Returns current scroll state in a same format as onUpdate
|
destroy | Removes all instance's event listeners |
Full Example
const viewport = document.querySelector('.viewport');
const content = document.querySelector('.scrollable-content');
const sb = new ScrollBooster({
viewport,
content,
bounce: true,
textSelection: false,
emulateScroll: true,
onUpdate: (state) => {
// state contains useful metrics: position, dragOffset, dragAngle, isDragging, isMoving, borderCollision
// you can control scroll rendering manually without 'scrollMethod' option:
content.style.transform = `translate(
${-state.position.x}px,
${-state.position.y}px
)`;
},
shouldScroll: (state, event) => {
// disable scroll if clicked on button
const isButton = event.target.nodeName.toLowerCase() === 'button';
return !isButton;
},
onClick: (state, event, isTouchDevice) => {
// prevent default link event
const isLink = event.target.nodeName.toLowerCase() === 'link';
if (isLink) {
event.preventDefault();
}
}
});
// methods usage examples:
sb.updateMetrics();
sb.scrollTo({ x: 100, y: 100 });
sb.updateOptions({ emulateScroll: false });
sb.destroy();
Live ScrollBooster Examples On CodeSandbox
Browser support
ScrollBooster has been tested in IE 11, Edge and other modern browsers (Chrome, Firefox, Safari).
Special thanks
David DeSandro for his talk "Practical UI Physics".
License
MIT License (c) Ilya Shubin
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].