JavaScript Scroll by Dragging – Make Website Drag Friendly

Default Behavior of browsers are compatible to scroll by mouse wheel or by arrow keys. Scrolling both horizontally and vertically is not possible by holding the page like a drag and drop object (usually in mobiles). Mouse wheel is not a best option for mobile devices where user needs to move up-down left-right using touch. […]

Default Behavior of browsers are compatible to scroll by mouse wheel or by arrow keys. Scrolling both horizontally and vertically is not possible by holding the page like a drag and drop object (usually in mobiles). Mouse wheel is not a best option for mobile devices where user needs to move up-down left-right using touch.

Make Your Content Like Google Maps

While checking Google Maps did you notice you can drag using mouse. Drag Scroll js allows you to drag page content by holding the mouse button. DragScroll allows you to drag your page horizontally and vertically using mouse click.

Dragscroll

DragScroll is a JavaScript Library so you can make Draggable Pages.So it will become mobile friendly as well. See the Demo Here.

Basic HTML Startup:

<!doctype html>
 <html>
 <head>
 <title>Dragscroll Demo</title>
 <script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>
 </head>
 <body>
 </body>
 </html>

Here we are loading dragscroll library via Rawgit CDN.

After this setup you need to enclose your content a class “dragscroll” so your library know which div you want to make scroll.

<!doctype html>
 <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="" />
 </div>
 </body>
 </html>

The library automatically search for class name dragscroll. Will automatically adds dragging functionality to yor content. We have to change our pointer from cursor to grab so it becomes user friendly and people know it’s dragging content.

You need to set the DIV height and width so content easily becomes drag able.

Leave a Reply

Your email address will not be published. Required fields are marked *