Move an object on mouse wheel scroll event using JavaScript

Today, I’ve come along with another post where you’ll see how to move a object within web page when you scroll the mouse wheel using JavaScript.In this example, when you move the mouse wheel the object i.e div moves upwards or downwards depending upon the scrolling direction the mouse wheel. Now, let’s look at the detail of this tutorial in JavaScript.

View Live Demo

HTML and CSS for object to be scrolled on mouse wheel movement

<div id="object">This block moves as you move mouse wheel.</div>

As you can see above code, the object which is going to be moved is placed in the division with id object. For the above division, I’ve defined style and you can see the CSS code below. Remember that ,you can change the below CSS code according to your need but remember that the position should be absolute.

#object {

JavaScript code for handling mouse scroll event.

window.onload = function()
  //adding the event listerner for Mozilla
  if(window.addEventListener) document.addEventListener('DOMMouseScroll', moveObject, false);
  //for IE/OPERA etc
  document.onmousewheel = moveObject;

First of all, we need to attach the mouse wheen scroll event to the document.As you can see in the first line of above function, event listner “moveObject” is added to the mouse scroll event in the document for Mozilla browsers and in the second line event handler “moveObject” is called for document.onmousewheel event for browsers like IE and Opera etc.

Now look at the mouse wheel scroll event handler function “moveObject”

function moveObject(event)
  var delta = 0;
  if (!event) event = window.event;
  // normalize the delta
  if (event.wheelDelta)
    // IE & Opera
   delta = event.wheelDelta / 120;
  else if (event.detail) // W3C
    delta = -event.detail / 3;
  var currPos=document.getElementById('object').offsetTop;
  //calculating the next position of the object
  //moving the position of the object

As you can see in the above function first the scrolling delta value is calculated. The delta variable holds the value  -1 or 1 depending upon the movement of the wheel.

After calculating the detail value, the top offset of the object is taken using offsetTop property using JavaScript. After that, the next position of the object is calculated, which is 10 pixel up or down from the current position of the object.

Finally, property is used to set the current position of the object using JavaScript.

Download Full Source Code

8 thoughts on “Move an object on mouse wheel scroll event using JavaScript

  1. Great !

  2. In IE6 this solution is not good, because delta would be ~(+/-)2,3333… Why don’t you norm with absolute value? This function return +1 or -1, so

    delta = event.wheelDelta / 120;


    delta = event.wheelDelta / Math.abs(event.wheelDelta)

  3. @Nucc-thanks for the suggestion I’ve not checked with IE6, let me test it and make correction to the code if I find the bug…

  4. to perfect this one I think it should stop at the edges of the screen. noticed it running slower, if scrolled with shift or alt down(using FF3). Would also be great if it could scroll horizontally when holding ctrl.

  5. JM

    This is JUST what I have been looking for!!!! Something to scroll my main div which isn’t the topmost div so only scrolls when the mouse is over an object (text/image) in it or its scroll bar. (I’ll use the scroll bar page for ppl whose browsers won’t support this script, though, of course. It just won’t work as nicely for them.)

    I found this after much searching on Google.

    Thank you! :-)

  6. IMF

    A very good one, thanks.

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>