Move an object on mouse wheel scroll event using JavaScript

Advertisement

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 {
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

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

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

  • Thiago Santos wrote on 24 August, 2008, 15:29

    Great !

  • Nucc wrote on 6 September, 2008, 15:58

    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
    instead

    delta = event.wheelDelta / 120;

    use

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

  • Roshan wrote on 6 September, 2008, 16:08

    @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…

  • Vlakarados wrote on 10 November, 2008, 20:48

    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.

  • JM wrote on 18 November, 2008, 20:30

    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! :-)

  • IMF wrote on 9 June, 2009, 16:49

    A very good one, thanks.

Trackbacks

  1. Pages tagged "php"
  2. pligg.com

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.