html tutorial - onwheel Attribute in HTML - html5 - html code - html form
Learn html - html tutorial - Onwheel attribute in html - html examples - html programs
- The onwheel attribute specifies the wheel of a pointing device is rolled up or down over an element.
- The onwheel attribute also defines the user scrolls on an element by using a mouse.
- The onwheel attribute is a section of the Event Attributes.
Syntax for onwheel attribute in HTML:
<element onwheel ="script">Difference between HTML 4.01 and HTML 5 for onwheel Attribute:
HTML 4.01
- The onwheel attribute does not supported.
HTML 5
- The onwheel attribute is added new in HTML 5.
Applies To:
| Element | Attribute |
|---|---|
| All HTML Elements | onwheel |
onwheel Attribute Values:
| Value | Description |
|---|---|
| script | The script can run on onwheel. |
Sample Coding for onwheel Attribute in HTML:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy onwheel attribute</title>
<style>
#myDIV {
border: 1px solid black;
width: 300px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<h3>Welcome to Wikitechy.com</h3>
<h5>Wikitechy technology tutorials</h5>
<p>To check onwheel attribute scroll down:</p>
<div id="myDIV" onwheel="OnWheel()">Wikitechy tutorials includes
various technologies like HTML,CSS,GITHUB,ANGULAR JS etc.,<br>
<br>HTML-Hyper Text Markup Language.HTML is a typical markup
language used for building a web pages.The word "Markup" means a
language with particular syntax which instructs a Web browser to how
the page needs to display. HTML uses a pre-defined set of elements
called tags. A group of elements which is join together to build the
web page. HTML tags defines elements like "paragraph", "body", and so on.
</div>
<script>
function OnWheel() {
document.getElementById ("myDIV").style. Color = "blue";
}
</script>
</body>
</html>Code Explanation for onwheel Attribute in HTML:
- head tag - start with <head> and its end with </head>.
- <style> tag is used to set color for a div tag.
- #wikitechy id is created to apply for style.
- To apply style for border with 2px solid and black color.
- <div> tag used to group the elements.
- id attribute is used to set red color for the contents inside the <div> tag.
- “#myDIV” is used to apply styles to the <div> element.
- The onwheel attribute is used to call OnWheel() JavaScript function when the content is rolled down or upwards by mouse wheel.
- The JavaScript function OnWheel() is used to display the content in blue color when mouse wheel rolled.
Output for onwheel Attribute in HTML:
- The output has been displayed.
- When user try to scroll the mouse wheel the font color of <div> is changes to blue.
Browser Support for onwheel Attribute in HTML:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Yes | No | Yes | No | Yes |