js如何判断鼠标滚轮是向下还是向上滚动

发布网友发布时间：2022-04-21 19:07

共2个回答

懂视网时间：2022-04-23 09:43

本文主要和大家分享JS实现判断鼠标是否滚动，主要以代码的形式和大家分享，希望能帮助到大家。

<script>
 var scrollFunc = function (e) { 
 var direct = 0; 
 e = e || window.event; 
 if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件  
  if (e.wheelDelta > 0) { //当滑轮向上滚动时 
  alert("滑轮向上滚动"); 
  } 
  if (e.wheelDelta < 0) { //当滑轮向下滚动时 
  alert("滑轮向下滚动"); 
  } 
 }
  else if (e.detail) { //Firefox滑轮事件 
  if (e.detail> 0) { //当滑轮向上滚动时 
  alert("滑轮向上滚动"); 
  } 
  if (e.detail< 0) { //当滑轮向下滚动时 
  alert("滑轮向下滚动"); 
  } 
 } 
 ScrollText(direct); 
 } 
 //给页面绑定滑轮滚动事件 
 if (document.addEventListener) { 
 document.addEventListener('DOMMouseScroll', scrollFunc, false); 
 } 
 //滚动滑轮触发scrollFunc方法 
 window.onmousewheel = document.onmousewheel = scrollFunc;
</script>

热心网友时间：2022-04-23 06:51

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>yugi</title>
<style>
body{
height: 1111px;
}
</style>
<script>
var agent = navigator.userAgent;
if (/.*Firefox.*/.test(agent)) {
document.addEventListener("DOMMouseScroll", function(e) {
e = e || window.event;
var detail = e.detail;
if (detail > 0) {
console.log("鼠标向下滚动");
} else {
console.warn("鼠标向上滚动");
}
});
} else {
document.onmousewheel = function(e) {
e = e || window.event;
var wheelDelta = e.wheelDelta;
if (wheelDelta > 0) {
console.log("鼠标向上滚动");
} else {
console.warn("鼠标向下滚动");
}
}
}
</script>
</head>
<body>
</body>
</html>