jQuery Plugin For Drag To Scroll Functionality - dragScroll

File Size: 4.18 KB
Views Total: 6485
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Drag To Scroll Functionality - dragScroll

dragScroll is a dead simple jQuery plugin which enables the panning (drag to scroll) functionality on your scrollable container.

How to use it:

1. Create a scrollable container as follows:

<div class="container">
  <div class="scroller">
    <div class="wrapper">
      <div> 1 </div>
      <div> 2 </div>
      <div> 3 </div>
      <div> 4 </div>
      <div> 5 </div>
      <div> 6 </div>
      <div> 7 </div>
      <div> 8 </div>
      <div> 9 </div>
      <div> 10 </div>
      ...
      <div> n </div>
    </div>
  </div>
</div>

2. Put jQuery JavaScript library and the jQuery dragScroll plugin's script at the end of the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
</script>
<script src="dragScroll.js"></script>

3. Enable the drag to scroll functionality on the container.

var $container = $(".container");
var $scroller = $(".scroller");

bindDragScroll($container, $scroller);

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