QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • BlockClusterBuild Private Blockchains
  • Home
  • QIdea
  • QTrack
Home Home JavaScript Scroll by Dragging

JavaScript Scroll by Dragging

header-scroll-effect

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

<!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.

Example

Here is a complete example showing how to use this library

View Demo

<!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="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.

Mar 24, 2015Narayan Prusty
Number Counter Animation using JavascriptAdd a New Feed Format Type to WordPress
Comments: 14
  1. Pradeep Singh
    2 years ago

    I can’t change select dropdown if i use dragscroll.

    ReplyCancel
  2. htmlcoder
    2 years ago

    Thanks! That is i’m looking for
    How I can add animate after dragging?

    ReplyCancel
  3. Dex
    2 years ago

    Thanks bro

    ReplyCancel
  4. leo
    2 years ago

    I add ‘overflow: hidden’ style to hide the scroll bar, it works fine on desktop browsers, but failed on mobile device browsers. Anybody helps?

    ReplyCancel
  5. Sanket
    2 years ago

    I have used this dragscroll and working fine for me. I want to drag div till particular element on page load. How I can achieve this. I dont want to add left or margin-left as it will impact drag functionality. Please some one will help me on this.

    ReplyCancel
  6. Gerardo
    2 years ago

    Congratulation! Excelent! Thanks

    ReplyCancel
  7. Jaxon
    2 years ago

    Hot damn, lokniog pretty useful buddy.

    ReplyCancel
  8. Shamaseen
    2 years ago

    Keep in mind that if you are using ajax you should put the async to false .

    ReplyCancel
  9. André
    2 years ago

    Wondeful work, Narayan! Unfortunately, it stops working on Firefox (46.0.1, Mac OS) if I transplant it from the div to the body tag.

    working fine in div:

    http://andrebaumunk.de/testdragscrolldiv.htm

    not working in body tag (Firefox!):

    http://andrebaumunk.de/testdragscrollbody.htm

    It´s still working fine on Safari etc. but nothing is moving on Firefox. Highly appreciate your comments and ideas about it! Thanks a lot.

    ReplyCancel
    • André
      2 years ago

      Problem solved by applying dragscroll to another div sitting right underneath the body tag containing all content. Thanks

      ReplyCancel
  10. Kate
    3 years ago

    Same problem – cannot interract with text/number inputs or select boxes.

    ReplyCancel
  11. Jerome
    3 years ago

    Great, it’s working as expected, but I just found a simple problem, There are textboxes inside my scrollable div, and I can’t focus with any of the text box.

    ReplyCancel
  12. Cristian
    3 years ago

    Thanks a lot. By far, the best script to scroll a div by dragging that I’ve found. Thank you again.

    ReplyCancel
  13. Anthony
    3 years ago

    Thanks. I’m going to try and add this to my site

    ReplyCancel

Leave a Reply to Gerardo Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

3 years ago 15 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Dragscroll
  • Example
Related Articles
  • Detecting End Of Scrolling In HTML Element
  • HTML Textarea Fixed Size
  • Horizontal and vertical Centering Using CSS
  • Changing CSS Style using JavaScript
  • Fade Image On Scroll Effect
Our Sponsor
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license