HTML onmousewheel Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

This is a deprecated attribute, please use onwheel attribute instead.

The onmousewheel HTML event attribute is deprecated, meaning it should no longer be used. It has been replaced by the onwheel attribute, which is more widely supported and provides more accurate information about the mouse wheel event.

The onmousewheel attribute fires when the user rolls the mouse wheel up or down over an element. It can be used to perform any action you want, such as scrolling the element, changing its size, or displaying a different element.

To use the onmousewheel attribute, simply add it to the element you want to listen for the event on. For example, the following code would display an alert box when the user rolls the mouse wheel over the <div> element:

<div onmousewheel="alert('Mouse wheel event!')"></div>

You can also use the onmousewheel attribute to pass a function to be executed when the event fires. For example, the following code would scroll the <div> element up by 100 pixels when the user rolls the mouse wheel down:

<div onmousewheel="window.scrollBy(0, -100)"></div>

However, it is important to note that the onmousewheel attribute is deprecated, so you should use the onwheel attribute instead. The onwheel attribute is more widely supported and provides more accurate information about the mouse wheel event.

Here is an example of how to use the onwheel attribute:

<div onwheel="function(event) {
  // Scroll the element up or down by the amount of the wheel delta
  window.scrollBy(0, event.deltaY);
}"></div>

This code will scroll the <div> element up by 100 pixels if the user rolls the mouse wheel down, and down by 100 pixels if the user rolls the mouse wheel up.

Syntax

<element onmousewheel="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html> 

  <html> 

    <head>

     <title>onmousewheel event</title> 

     <style> 

     div {

       border: 1px solid;

     }

     </style> 

    </head> 

    <body>

     <p>To demonstrate the onmousewheel event attribute, use the mouse wheel on the element:</p>

     <div id="wheeee" onmousewheel="wheeee()">The quick brown fox jumps over the lazy dog</div> 

<script> 

function wheeee () {

  document.getElementById("wheeee").style.fontSize="35px";

  document.getElementById("wheeee").style.color="blue";

} 

</script> 

  </body> 

</html>