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. <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>
Code language: JavaScript (javascript)Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…
Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…
Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…
1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…
GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…
1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…
View Comments
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....