🎉 DragScroll library

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

Give this library the ⭐️ if it's useful 😉

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>

# npm or yarn

npm i --save dragscroll-ts
yarn add dragscroll-ts

// 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 stylesheet 😉
- Need to be specific 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