Easy Draggable Scroller Plugin For jQuery - draggableScroll

draggableScroll is a simple, lightweight jQuery plugin that allows the user to move scrollable content with mouse drag. Supports vertical, horizontal, and diagonal scroll. Without the need of jQuery UI's draggable widget.

How to use it:

1. Insert both jQuery library and the jQuery draggableScroll plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="draggable-scroll.js"></script>

2. Add scrollable content into a DIV container with the data-draggable-scrolled-content attribute:

<div data-draggable-scrolled-content>
  <div class="scroller-content"></div>
  <div class="scroller-content"></div>
  <div class="scroller-content"></div>
  <div class="scroller-content"></div>
  <div class="scroller-content"></div>
  <div class="scroller-content"></div>
  <div class="scroller-content"></div>
  ...
</div>

3. To initialize the jQuery draggableScroll plugin, just insert the scrollable container into another div element with the data-draggable-scroll attribute:

<div data-draggable-scroll>
  <div data-draggable-scrolled-content>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    ...
  </div>
</div>

4. You can also add custom scroll controls to the scrollable container that enable the user to scroll through the content by mouse click.

<div data-draggable-scroll>
  <div class="scrollerDemo-controlsWrapper">
    <div data-draggable-scroll-control="left:20px" class="scroller-controlt"></div>
    <div data-draggable-scroll-control="right:20px" class="scroller-control"></div>
    <div data-draggable-scroll-control="top:20px" class="scroller-control"></div>
    <div data-draggable-scroll-control="bottom:20px" class="scroller-control "></div>
  </div>
  <div data-draggable-scrolled-content>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    <div class="scroller-content"></div>
    ...
  </div>
</div>

5. All default configuration options.

{
  scrollX: true,
  scrollY: true,
  dropOnMouseLeave: false,
  animateScrollByControls: true,
  animateScrollTime: 200,
  hideScrollbars: true,
  inertiaByDragging: true,
  detectDirectionDrag: true,
  removeDirectionDragOnMouseUp: true,
  inertialResistance: 150
};

---

This awesome jQuery plugin is developed by FrankNewII. For more Advanced Usages, please check the demo page or visit the official website.