Smooth Drag To Scroll Plugin For jQuery - dragNscroll
File Size: | 10 KB |
---|---|
Views Total: | 2324 |
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:
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.