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.