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.

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 {
font-weight:bold;
background:yellow;
padding:5px;
width:300px;
position:absolute;
left:500px;
top:200px;
}

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
  currPos=parseInt(currPos)+(delta*10);
  //moving the position of the object
  document.getElementById('object').style.top=currPos+"px";
}

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, style.top property is used to set the current position of the object using JavaScript.

Download Full Source Code