By default desktop browsers let you scroll an element or page using the mouse wheel. But its unfriendly when users want to scroll both horizontally and vertically. Mouse wheel doesn’t seem to be the best option in that case. Therefore we can let users scroll by holding the mouse button i.e., dragging. For example, Google maps lets you scroll the map horizontally and vertically by dragging the map using mouse button.
In this tutorial I will show you the easiest to provide drag scroll functionality for a scrollable element.
Dragscroll
Dragscoll is an open source JavaScript library which lets you achieve this with just few lines of code.
Here is a basic HTML element which loads this library
Here we are loading dragscroll library via Rawgit CDN.
Example
Here is a complete example showing how to use this library
<html>
<head>
<title>Dragscroll Demo</title>
<script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
</head>
<body>
<div class="dragscroll" style="width: 320px; height: 160px; overflow: scroll; cursor: grab; cursor : -o-grab; cursor : -moz-grab; cursor : -webkit-grab;">
<img src="http://qnimate.com/wp-content/uploads/2014/09/header-scroll-effect.jpg" />
</div>
</body>
</html>
This library finds the elements with class name dragscroll and its adds the dragging functionality to all those elements. Here I am changing the cursor from pointer to grab using CSS to make it more user-friendly.
