Mouse Scroll Event Up/Down Example in JavaScript
- By Viral Patel on August 28, 2009
The 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>
Online Demo
Get our Articles via Email. Enter your email address.
Good work. But, may i know where it will use?
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.
very cool & good code , thank you very much for sharing.
Can you share this code on my JavaScript library?
Awaiting your response. Thank
realy good i am fan your coding work..
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.
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?
It’s Really Helpfull