WheelEvent deltaY 属性
JavaScript基础 2022-06-08 12:05:09小码哥的IT人生shichen
WheelEvent deltaY 属性
实例
返回用户是向上还是向下滚动：
function myFunction(event) {
var y = event.deltaY;
}
完整实例：
<!DOCTYPE html>
<html>
<body onwheel="myFunction(event)">
<h1>WheelEvent deltaY 属性</h1>
<p>滚动此页面可查看 deltaY 属性的值。</p>
<p id="demo"></p>
<script>
function myFunction(event) {
var y = event.deltaY;
document.getElementById("demo").innerHTML = y;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
deltaY 属性在向下滚动时返回正值，向上滚动时返回负值，否则为 0。
注释：该属性只读。
浏览器支持
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| deltaY | 31 | 支持 | 17 | 不支持 | 18 |
语法
event.deltaY技术细节
| 返回值： | Double 型值，指示鼠标滚轮的滚动方向。 |
|---|
更多实例
在 DIV 内滚动以使其更大/更小：
function myFunction(event) {
var y = event.deltaY;
var currentSize = event.target.style.width;
if (y > 0) {
newSize = parseInt(currentSize) + 10;
} else {
newSize = parseInt(currentSize) - 10;
}
event.target.style.width = newSize + "px";
event.target.style.height = newSize + "px";
}
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>WheelEvent deltaY 属性</h1>
<p>通过在 DIV 元素内部滚动来调整其大小：</p>
<div onwheel="myFunction(event)" style="width:100px;height:100px;background-color:Tomato"></div>
<script>
function myFunction(event) {
var y = event.deltaY;
var currentSize = event.target.style.width;
if (y > 0) {
newSize = parseInt(currentSize) + 10;
} else {
newSize = parseInt(currentSize) - 10;
}
event.target.style.width = newSize + "px";
event.target.style.height = newSize + "px";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
