📌  相关文章
📜  HTML | DOM onwheel 事件(1)

📅  最后修改于: 2023-12-03 14:41:48.510000             🧑  作者: Mango

HTML | DOM onwheel 事件

简介

onwheel 事件是当使用鼠标滚轮时触发的事件。它可以用于在浏览器中对滚动事件进行自定义的操作。

语法
<object onwheel="myScript">

或

<object onwheel="return myScript()">
示例

下面是一个简单的例子，当鼠标滚轮被滚动时，修改页面中文本的大小。

<!DOCTYPE html>
<html>
<body onwheel="changeFontSize(event)">
    <p id="text" style="font-size: 20px;">Hello World!</p>
    <script>
        function changeFontSize(event) {
            var fontSize = parseInt(document.getElementById("text").style.fontSize);
            if (event.deltaY < 0) {
                fontSize += 2;
            } else {
                fontSize -= 2;
            }
            document.getElementById("text").style.fontSize = fontSize + "px";
        }
    </script>
</body>
</html>

当用户滚动鼠标滚轮时，修改文本的字体大小。

属性

event.deltaX：当滚动方向为水平方向时，滚动的距离。

event.deltaY：当滚动方向为垂直方向时，滚动的距离。

event.deltaZ：当滚动方向为垂直方向时，未定义。

event.deltaMode：滚动的模式，为以下值之一：表示要素的像素数量，表示每次滚动一行的行数，表示滚动一页的页数。

兼容性

onwheel 事件在大多数现代浏览器中支持，包括 Chrome、Firefox、Safari、Opera 和 IE9+ 等。

总结

HTML | DOM onwheel 事件可以用于在浏览器中对滚动事件进行自定义的操作，可以处理滚轮的上、下、左、右方向以及滚轮的速度等属性，非常灵活。