onwheel incident


onwheel Event

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#myDIV {
    border: 1px solid black;
}
</style>
</head>
<body>

<div id="myDIV">该实例演示了如何使用 addEventListener() 方法向 DIV 元素添加 "wheel" 事件。在这个区域上下滚动鼠标滚轮!</div>
<p>当你在 div 元素中滚动鼠标滚轮时，脚本函数会设置 div 的字体大小为 35 像素。</p>
<p><strong>注意：</strong> Safari 浏览器不支持 wheel 事件</p>
<script>
document.getElementById("myDIV").addEventListener("wheel", myFunction);
function myFunction() {
    document.getElementById("myDIV").style.fontSize = "35px";
}
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view Online Example


#Definition and Usage

The onwheel event is triggered when the mouse wheel scrolls up and down on the element.

The onwheel event can also be triggered when scrolling on the touchpad or zooming in or out of the area (such as the touchpad on a laptop).

Browser support

31.09.017.018.0
Event




#onwheelNot supported

Note: In the IE browser, the wheel event can only be supported through the addEventListener() method. There is no onwheel attribute in DOM objects.

Syntax

In HTML:

<
element onwheel="myScript"> Try it
JavaScript:

object.onwheel=function(){myScript};Try it
In JavaScript, use the addEventListener() method:

object.addEventListener("wheel", myScript); try it

Note: Internet Explorer 8 and earlier IE versions do not support the addEventListener() method.

Technical details
Whether bubbling is supported: Can be canceled: ##Event type:Supported HTML tags:
Yes
Yes
WheelEvent
All HTML elements

←
→