JavaScript onmousewheel event

The javascript mouse wheel event is the mouse event to navigate the html web page. The mouseListner uses the mouse wheel (onmousewheel) function to get the functionality after rolling the mouse. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript.

We can use the "onmousewheel" event, but it deprecates in the javascript. We can use the javascript for the "onwheel" attribute instead of the "onmousewheel" event.

Syntax

The following syntax uses the "onmousewheel" function to show the mouse wheel event.

<div id = "demoDIV" onmousewheel = "function_name()"> </div>
<script>
function function_name(){
//write code here!
}
</script>

The following syntax shows the mouse wheel event with the "mouse wheel" function using the addEventListener event.

<script>
window.addEventListener("mouse wheel", function_name);
</script>

Examples

The following examples show the mouse wheel event with the different methods and functions.

Example 1: the following example shows the basic mouse wheel event using javascript. We can use the event on the html tag with the function. Function changes font size and color when the mouse wheel event works.

<!DOCTYPE html>
<html>
<head> 
<title> JavaScript Mouse Wheel Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body>
<h2> JavaScript Mouse Wheel Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmousewheel = "demoDIVFunction()">
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouseListner uses the mouse wheel function to get the functionality after rolling the mouse. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript. 
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method activates successfully!!!";
  document.getElementById("demoDIV").style.fontSize = "20px";
  document.getElementById("demoDIV").style.color = "blue";
}
</script>
</body>
</html>

Output:

The image shows the activated mouse wheel events output page.

Example 2: the following example uses the mouse wheel event. The javascript uses the "mousewheel" event with the addEventListner method.

<!DOCTYPE html>
<html>
<head> 
<title> JavaScript Mouse Wheel Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body>
<h2> JavaScript Mouse Wheel Method </h2>
<b> The mouse wheel rolls anywhere on the web page. </b>
<p id = "datas"> </p>
<div id = "demoDIV">
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript. 
</div>
<script>
window.addEventListener("mousewheel", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with addEventListener!!!";
  document.getElementById("demoDIV").style.fontSize = "20px";
  document.getElementById("demoDIV").style.color = "blue";
}
</script>
</body>
</html>

Output:

The image shows the activated mouse wheel events output page.

Example 3: the following example uses the mouse wheel event. The javascript uses the "onmousewheel" event with the javascript handler.

<!DOCTYPE html>
<html>
<head> 
<title> JavaScript Mouse Wheel Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body>
<h2> JavaScript Mouse Wheel Method </h2>
<b> The mouse wheel rolls bordered container on the web page. </b>
<p id = "datas"> </p>
<div id = "demoDIV">
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript. 
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.onmousewheel = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with javascript handler!!!";
  document.getElementById("demoDIV").style.fontSize = "20px";
  document.getElementById("demoDIV").style.color = "blue";
}
</script>
</body>
</html>

Output

The image shows the activated mouse wheel events output page.

Example 4:

The following example uses the onwheel with the handler function on the body tag. When we scroll the wheel on the web page, the style tag changes and displays as per the handler.

<!DOCTYPE html>
<html>
<head> 
<title> JavaScript Mouse Wheel Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body id = "demoDIV">
<h2> JavaScript Mouse Wheel Method </h2>
<b> The mouse wheel rolls anywhere on the web page. </b>
<p id = "datas"> </p>
<div>
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript. 
</div>
<script>
window.addEventListener("mousewheel", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with addEventListener!!!";
 document.getElementById("demoDIV").style.height = "255px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "3px dotted red";
}
</script>
</body>
</html>

Output

The image shows the activated mouse wheel events output page.

Conclusion

The "onmousewheel" function uses to roll the mouse wheel event, but advanced browsers deprecated the event. We can use the old version of browsers for the mouse wheel event.

Next TopicJavaScript onkeyup Event

← prev next →