#DraggableScroll (jQuery) Easy styled jQuery plugin for use DragNDrop for scrolling container with some content. For more information look at live demo.

Install

npm i jquery-draggable-scroll

Usage

By data-attributes (Html default options)

<div data-draggable-scroll>
    <div data-draggable-scroll-control="left:30vw"></div>
    <div data-draggable-scroll-control="right:30vw"></div>
    <div data-draggable-scroll-control="top:30vh"></div>
    <div data-draggable-scroll-control="bottom:30vh"></div>
    <div data-draggable-scroll-content>
        <table class="very-big-table></table>
    </div>
</div>

By JS

    <div #id='scrolled-content'>
        <div data-draggable-scroll-control="left:30vw"></div>
        <div data-draggable-scroll-control="right:30vw"></div>
        <div data-draggable-scroll-control="top:30vh"></div>
        <div data-draggable-scroll-control="bottom:30vh"></div>
        <div data-draggable-scroll-content>
            <table class="very-big-table></table>
        </div>
    </div>

$('#scrolled-content').draggableScroll(options);

Options (defaultConfig)

options = {
    scrollX: true, // is need to scroll by X direction
    scrollY: true, // is need to scroll by Y direction
    dropOnMouseLeave: false, // drop scrolled content by mouseleae
    animateScrollByControls: true, // Work only when some controls is exist (if you want to disable default animate scrolling by click on controls)
    animateScrollTime: 200, // Work only when controls is exist. Time to animate scroll by controls
    hideScrollbars: true, // Hide default scrollbars
    inertiaByDragging: true, // Inertial move on drop scrolled content
    detectDirectionDrag: true, // Add class to scrolled content with directions names
    removeDirectionDragOnMouseUp: true // Leave classnames with last direction on drop scrolled content
};