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><scriptlanguage="javascript">window.onload = function()
{
//adding the event listerner for Mozillaif(window.addEventListener)
document.addEventListener('DOMMouseScroll', moveObject, false);
//for IE/OPERA etcdocument.onmousewheel = moveObject;
}
functionmoveObject(event)
{
var delta = 0;
if (!event) event = window.event;
// normalize the deltaif (event.wheelDelta) {
// IE and Opera
delta = event.wheelDelta / 60;
} elseif (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 objectdocument.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.
<divid="scroll">Dancing Div</div></body>
</html>
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. :)
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”;
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?
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!
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.
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”;
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
thank you.. i was searching for the same kind of functionality for one of my new build website..
:)
awesome
really great yaar!!!!
An awesome post for the learner like me please do post such types of post for us thanks again….
Gracias me sirve, esta muy bueno
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!
dude, that’s crazy and cool, and thanx for sharing!