Smooth Drag To Scroll Plugin For jQuery - dragNscroll

Smooth Drag To Scroll Plugin For jQuery - dragNscroll
File Size: 10 KB
Views Total: 107
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.