<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标滚轮事件</title>
<style>
.wheel1 {
width: 400px;
height: 200px;
margin: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="wheel1"></div>
</body>
</html>
通过原生js监听鼠标滚轮事件文章来源：https://www.toymoban.com/news/detail-598380.html
var dom = document.querySelector(".wheel1");
if (window.addEventListener) {
dom.addEventListener("wheel", function (e) {
loadWheel(e);
})
} else {
dom.attachEvent("onmousewheel", function (e) {
loadWheel(e);
})
}
function loadWheel(e) {
if (e.wheelDelta < 0) {
console.log("向下滚动！");
} else {
console.log("向上滚动！");
}
}
通过jquery实现鼠标滚轮事件，若ie8无法实现，降低jquery版本文章来源地址https://www.toymoban.com/news/detail-598380.html
var nav = navigator || {};
var ua = nav.userAgent;
var isIE = ua && (ua.indexOf("MSIE") > -1 || ua.indexOf("Trident") > -1);
if (isIE) {
$(".wheel1").on("mousewheel", function (e) {
loadWheel(e);
})
} else {
$(".wheel1").on("wheel", function (e) {
loadWheel(e);
})
}
function loadWheel(e) {
if (e.originalEvent.wheelDelta < 0) {
console.log("向下滚动！");
} else {
console.log("向上滚动！");
}
}
到了这里，关于js监听鼠标滚轮事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
