Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML onwheel Event Attribute
The HTML onwheel event attribute is triggered when the user moves the wheel of the mouse on an HTML element in an HTML document.
Syntax
Following is the syntax −
<tagname onwheel=”script”>Content</tagname>
Let us see an example of HTML onwheel event Attribute −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
.wheel {
border: 2px solid #fff;
padding: 10px;
}
</style>
</head>
<body>
<h1>HTML onwheel Event Attribute Demo</h1>
<p onwheel='wheelFn()' class='wheel'>This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content. This is a paragraph with some dummy content.
This is a paragraph with some dummy content.</p>
<p>Move the wheel of the mouse up or down on above paragraph</p>
<script>
function wheelFn() {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
document.body.style.color = "#fff";
}
</script>
</body>
</html>Output
Now move the mouse wheel up or down on paragraph element to observe how onwheel event attribute works.
Updated on: 26-Sep-2019
48 Views
Advertisements