🎉 DragScroll library

Drag Scroll library - smooth content scroll via mouse/touch dragging. Publish standard format Js such as commonJs, ES Modules, UMD, Typescript

Why DragScroll ?

• More comfortable with physical UI, make consistency between different devices

Usage

First of all, you need to import this library:

// Javascript tag
<script type="type/javascript" src="https://unpkg.com/[email protected]/build/dragscroll.min.js"></script>

// Common Javascript
const DragScroll = require('dragscroll-ts')

// ES6 Module Javascript
import DragScroll from 'dragscroll-ts'

// Typescript
import DragScroll, { IDragScrollOptions } from 'dragscroll-ts'

const options: IDragScrollOptions = {}

interface IDragScrollOptions {
    $container: HTMLElement
    $content: HTMLElement
    axis: string
    allowInputFocus?: boolean
    allowSelectText?: boolean
}

Next step, init drag scroll instance

- NOTE: This library only wrap dragscroll logic on available HTML, It doesn't touch to stylesheet 😉
- Need to be specified the HTML structure of $container, $content elements. See picture below

const $container = document.getElementById('demo-wrapper')
const $content = document.getElementById('demo-content')

new DragScroll({
    $container: $container,
    $content: $content,
    axix: 'x',
    allowInputFocus: true,
    allowSelectText: false,
})

Config options

| Option | Type | Description | | --------------- | ----------- | ------------------------------------------------- | | $container | HTMLElement | The element wrap the dragable element | | $content | HTMLElement | The dragable child element of $container. | | axis | string | Default is 'x'. There are 3 values: 'x', 'y','xy' | | | | 'x' is horizontal direction | | | | 'y' is vertical direction | | | | 'xy' is both direction | | allowInputFocus | boolean | Allow input fields can be focused | | allowSelectText | boolean | Allow text content can be selected |

API

| Name | Description | | -------------------- | ------------------------------------------------------------ | | scrollTo | Pass coordinate object { x, y } to scroll to target position | | setInputCanBeFocused | Default is true. Input fields can be focused | | setTextCanBeSelected | Default is true. Text content can be selected | | destroy | Remove all listeners |

Events

The evt parameter is either MouseEvent or TouchEvent

| Name | Description | | --------- | -------------------------------- | | dragstart | To be fired when starting drag | | dragging | To be fired when dragging | | dragend | To be fired when dragging content meet end point |

// Example:
const dragSroll = new DragScroll({})
function handler(evt) {}

dragSroll.on('dragstart', handler)
dragSroll.off('dragstart', handler)

Files size

| File | Format | size | | ----------------- | --------- | -------- | | dragscroll.min.js | UMD | 7.6 KB | | dragscroll.cjs.js | Common Js | 6.96 KB | | dragscroll.es.js | ES Module | 6.95 KB |

License

MIT License (c) 2020 XuanVinh