dragscroll-ts
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    🎉 DragScroll library

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

    Alt text

    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/dragscroll-ts@1.0.2/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,
    })

    Alt text

    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

    Install

    npm i dragscroll-ts

    DownloadsWeekly Downloads

    6

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    34.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar