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.
Here is a basic HTML element which loads this library
Here we are loading dragscroll library via Rawgit CDN.
Here is a complete example showing how to use this library
<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" />
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.