HTML onmousewheel Event Attribute

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee

onmousewheel

HTML Event AttributeThis event attribute is supported by all modern browsers.

Updated 13th October 2023

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>

Result

Open in editor

Browser Support

The following information will show you the current browser support for the HTML onmousewheel event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.

This event attribute is supported by all modern browsers.