Smooth Drag To Scroll Plugin For jQuery - dragNscroll

dragNscroll is a jQuery scroll on drag plugin that allows users to scroll a page (or any scrollable element) by using mouse drag, similar to the swipe up/down behavior in mobile devices.

See It In Action:

See Also:

• Drag/Swipe To Scroll Plugin With jQuery - dragScroll.js
• Tiny Drag/Swipe To Scroll Plugin For jQuery - Dragscrollable
• Small JavaScript Library To Scroll Content with Mouse Drag – dragscroll
• Smooth Drag/Swipe To Scroll JavaScript Library – drag.js

How to use it:

1. Load the minified version of the jQuery dragNscroll plugin in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.dragnscroll.min.js"></script>

2. Attach the function dragNscroll to the scrollable element and the plugin will take care of the rest.

<div class="box">
  ...
</div>

.box { 
  width: 600px; 
  height: 300px; 
  overflow: scroll; 
  cursor: grab; 
}

$(function(){
  $('.box').dragNscroll()
});

3. Determine whether to allow to highlight (select) text while scrolling. Default: false.

$('.box').dragNscroll({
  allowHiliting: true,
})

4. Config the scroll acceleration.

$('.box').dragNscroll({
  acceleration:.65,
  deceleration:.85,
  decelRate:64,
})

5. Reverse the scroll direction. Default: false.

$('.box').dragNscroll({
  reverse: true,
})

6. Determine whether to enable inertial scrolling. Default: true.

$('.box').dragNscroll({
  allowThrowing: true,
  throwOnOut: true,
})

 

---

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