JavaScript onwheel mouse event

The mouse rolls up or down the web page and starts to operate the mouse wheel function using the "onwheel" 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 "onwheel" function to show the mouse wheel event.

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

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

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

Examples

The examples describe the onwheel mouse event with different functions.

Example 1:

The following example shows the basic 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 (onwheel) Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onwheel = "demoDIVFunction()">
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouseventlistner 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 onwheel Method activates successfully!!!";
  document.getElementById("demoDIV").style.fontSize = "25px";
  document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "1px solid black";
}
</script>
</body>
</html>

Output

The image shows the activated mouse wheel events output page.

Example 2:

The following example uses the mouse "onwheel" event. The javascript uses the "wheel" event with the addEventListner Method.

<!DOCTYPE html>
<html>
<head> 
<title>  JavaScript Mouse Wheel (onwheel) Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body>
<h2>  JavaScript Mouse Wheel (onwheel) 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("wheel", 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";
document.getElementById("demoDIV").style.border = "1px solid black";
}
</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 "onwheel" event with the javascript handler.

<!DOCTYPE html>
<html>
<head> 
<title> JavaScript Mouse Wheel (onwheel) Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body>
<h2> JavaScript Mouse Wheel (onwheel) 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.onwheel = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with javascript handler!!!";
  document.getElementById("demoDIV").style.fontSize = "18px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "1px solid black";
}
</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 (onwheel) Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body id = "demoDIV">
<h2> JavaScript Mouse Wheel (onwheel) Method </h2>
<b> The mouse wheel rolls bordered container on the body tag. </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>
var demoObj = document.getElementById("demoDIV");
demoObj.onwheel = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with javascript handler!!!";
  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.