Mouse Scroll Event Up/Down Example in JavaScript

mouse-scroll-wheelThe other day I was working on an App that required Google Map like functionality where Mouse Scroll event on an object triggered some action in JavaScript. Handling Mouse Wheel in JavaScript is quite simple. Most of the browsers support Mouse Scroll Event in one or other way. Mozilla provides window.addEventListener method that can be used to hook a handler for mouse scroll event. Internet Explorer and Opera on the other hand provides document.onmousewheel handler to hook the mouse event.

Source Code

Let us see an example for catching mouse scroll wheel event in JavaScript. In our example we will have a small DIV that moves up and down on scroll of mouse wheel. Following is the source code of our example:
<html> <head> <title>Mouse Scroll Wheel example in JavaScript - ViralPatel.net</title> <style> #scroll { width: 250px; height: 50px; border: 2px solid black; background-color: lightyellow; top: 100px; left: 50px; position:absolute; } </style> <script language="javascript"> window.onload = function() { //adding the event listerner for Mozilla if(window.addEventListener) document.addEventListener('DOMMouseScroll', moveObject, false); //for IE/OPERA etc document.onmousewheel = moveObject; } function moveObject(event) { var delta = 0; if (!event) event = window.event; // normalize the delta if (event.wheelDelta) { // IE and Opera delta = event.wheelDelta / 60; } else if (event.detail) { // W3C delta = -event.detail / 2; } var currPos=document.getElementById('scroll').offsetTop; //calculating the next position of the object currPos=parseInt(currPos)-(delta*10); //moving the position of the object document.getElementById('scroll').style.top = currPos+"px"; document.getElementById('scroll').innerHTML = event.wheelDelta + ":" + event.detail; } </script> </head> <body> Scroll mouse wheel to move this DIV up and down. <div id="scroll">Dancing Div</div> </body> </html>
Code language: JavaScript (javascript)

Online Demo

Online Demo – Mouse Scroll Event in JavaScript
Get our Articles via Email. Enter your email address.

You may also like...

14 Comments

  1. Good work. But, may i know where it will use?

  2. Hi scvinodkumar, you may use this when you want to create something like Google Maps or may be a timeline based UI where you scroll the time line to left or right on scroll event. :)

  3. very cool & good code , thank you very much for sharing.

    Can you share this code on my JavaScript library?

    Awaiting your response. Thank

  4. realy good i am fan your coding work..

  5. Ibn Saeed says:

    Just what i was looking for.

    Can this be used to scroll horizontally ?

    Also, Can it be used if one wants to hold down the left mouse button and move on the timeline.

    • rahan says:

      In order to scroll horizontally, just change
      var currPos=document.getElementById(‘scroll’).offsetTop;
      to
      var currPos=document.getElementById(‘scroll’).offsetLeft;
      and
      document.getElementById(‘scroll’).style.top = currPos+”px”;
      to
      document.getElementById(‘scroll’).style.left = currPos+”px”;

  6. Stasonix says:

    Hi, how can I set a handler on event SCROLLING UP in div, ‘caz scroll(); -it’s scrolling everywhere (up/down), but I need only when I scrolling UP my scroll-bar?

  7. Prashant Ramani says:

    It’s Really Helpfull

  8. Raja says:

    thank you.. i was searching for the same kind of functionality for one of my new build website..

    :)

  9. varun kumar says:

    awesome
    really great yaar!!!!

  10. Bharat says:

    An awesome post for the learner like me please do post such types of post for us thanks again….

  11. nelson says:

    Gracias me sirve, esta muy bueno

  12. ruwix yeah says:

    Hi, is there a way to count the number of scroll steps?
    I’m talking about the little steps you can feel while scrolling. In Windows you can adjust your scrolling speed, for me it’s set to roll the wheel one notch to scroll 3 lines at a time. Do you know what I mean? Can I detect that with JS/jQuery?
    Thank you!

  13. raja says:

    dude, that’s crazy and cool, and thanx for sharing!

Leave a Reply

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