The mouse scrolls vertically on the webpage, activating the mouse wheel functionality through the use of the "onwheel" event in JavaScript.
While we have the option to utilize the "onmousewheel" event, it is important to note that this event is being deprecated in JavaScript. Instead, we should implement the "onwheel" attribute as a modern alternative to the "onmousewheel" event.
Syntax
The syntax provided below utilizes the "onwheel" function to demonstrate the mouse wheel event.
<div id = "demoDIV" onwheel = "function_name()"> </div>
<script>
function function_name(){
//write code here!
}
</script>
The subsequent syntax demonstrates the mouse wheel event utilizing the "wheel" function alongside the addEventListener method for event handling.
<script>
window.addEventListener("wheel", function_name);
</script>
Examples
The illustrations provided outline the onwheel mouse event utilizing various functions.
Example 1:
The example below demonstrates a fundamental wheel event utilizing JavaScript. This event can be applied to the HTML tag in conjunction with a function. The function modifies both the font size and color in response to the mouse wheel activity.
<!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 displays the output page for the activated mouse wheel events.
Example 2:
The subsequent example demonstrates the utilization of the mouse "onwheel" event. The JavaScript code employs the "wheel" event in conjunction with the addEventListener 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 illustration displays the output page resulting from the activation of mouse wheel events.
Example 3:
The subsequent example demonstrates the utilization of the mouse wheel event. The JavaScript implementation employs the "onwheel" event in conjunction with the corresponding 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 illustration displays the output page for the activated mouse wheel events.
Example 4:
The subsequent example demonstrates the utilization of the onwheel event in conjunction with the handler function applied to the body element. As we rotate the scroll wheel on the webpage, the style tag is modified and presented according to the specifications of 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 illustration depicts the output page for the activated mouse wheel events.
Conclusion
The onwheel event in JavaScript is utilized to handle the scrolling of the mouse wheel on a web page. This functionality allows users to scroll through the page as well as various elements or tags, provided they are using an updated version of their web browser.