Scrollable Horizontally or Vertically Using Mouse Drag | dragScroll.js

dragscroll-js

dragScroll.js Swipe for additional scrolling that allows users to move content in a scrollable area horizontally or vertically using mouse drag or touch scrolling events.

horizontal scroll with mouse drag, scroll while dragging js, how to scroll while dragging, auto scroll when dragging javascript, drag and drop overflow scroll

How to make use of it:

1. Add your long content to a scrollable container. In this instance, we will apply a panning performance to a picture.

<div class="drag-box">

  <!-- draggable content -->
  <div class="drag">
    <img src="https://source.unsplash.com/KZc9h88nwpM/1600x900">
  </div>
  
</div>

2. Load the JavaScript file jquery.dragscroll.min.js after loading the jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="js/jquery.dragscroll.min.js"></script>

3. Attach the plugin to the draggable content and complete.

$(function(){
  $('.drag').dragscroll();
});

4. Limit the direction of scrolling: horizontal or vertical.

$('.drag').dragScroll({
  direction: 'scrollLeft'
});

$('.drag').dragscroll({
  direction: 'scrollTop'
});

5. Trigger features on begin/finish/move.

$('.drag').dragScroll({
  onStart: function($this) {
    console.log($this);
  },
  onMove: function($this) {
    console.log($this);
  },
  onEnd: function($this) {
    console.log($this);
  }
});

Drag/Swipe To Scroll Plugin, dragScroll.js Github, drag and drop with scroll, horizontal slider on mouse scroll, horizontal scroll on mouse move


See Demo And Download

Official Website(YuTingtao): Click Here

This superior jQuery/javascript plugin is developed by YuTingtao. For extra Advanced usage, please go to the official website.