html tutorial - onwheel Attribute in HTML - html5 - html code - html form



Onwheel attribute in html

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:

onwheel Attribute Code Explanation

  1. head tag - start with <head> and its end with </head>.
  2. <style> tag is used to set color for a div tag.
  3. #wikitechy id is created to apply for style.
  4. To apply style for border with 2px solid and black color.
  5. <div> tag used to group the elements.
  6. id attribute is used to set red color for the contents inside the <div> tag.
  7. “#myDIV” is used to apply styles to the <div> element.
  8. The onwheel attribute is used to call OnWheel() JavaScript function when the content is rolled down or upwards by mouse wheel.
  9. The JavaScript function OnWheel() is used to display the content in blue color when mouse wheel rolled.

Output for onwheel Attribute in HTML:

onwheel Attribute Output

  1. The output has been displayed.
onwheel Attribute Output
  1. 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

Related Searches to onwheel Attribute in html