📜  HTML | onwheel 事件属性(1)

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

HTML | onwheel 事件属性

HTML 的 onwheel 事件属性是当鼠标滚轮滚动时触发的事件。它适用于在用户滚动鼠标滚轮时触发一些特定的操作或函数。

语法
onwheel="JavaScript Code"
触发

当鼠标滚轮滚动时,onwheel 事件将被触发。

例子

下面的例子演示了如何使用 onwheel 事件属性来改变元素的背景颜色:

<!DOCTYPE html>
<html>
<head>
	<title>onwheel 事件属性示例</title>
	<script>
		function changeColor(e) {
			if (e.deltaY > 0) {
				document.body.style.backgroundColor = "pink";
			} else {
				document.body.style.backgroundColor = "lightblue";
			}
		}
	</script>
</head>
<body onwheel="changeColor(event)">
	<h1>onwheel 事件属性示例</h1>
	<p>向上或向下滚动鼠标滚轮以更改背景颜色。</p>
</body>
</html>
解释

当鼠标滚轮向上滚动时,e.deltaY 将是一个负数,因此背景颜色将更改为 "淡蓝色"。当鼠标滚轮向下滚动时,e.deltaY 将是一个正数,因此背景颜色将更改为 "粉色"。

结论

通过 onwheel 事件属性,您可以在用户滚动鼠标滚轮时执行一些与特定操作或函数有关的动作。