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

Posted 2023-03-24

参考技术A 判断鼠标滚轮是向上或向下滚动，不同的浏览器的判别方式是不一样的，当前比较流行的浏览器有 IE，Opera，Safari，Firefox，Chrome，在这个问题上Firefox和其他浏览器的实现方式是不一样的。现在通过一个具体的示例来分析这个问题吧！
示例代码如下：
<label for="wheelDelta"滚动值:</label(IE/Opera)<input type="text" id="wheelDelta"/
<label for="detail"滚动值:(Firefox)</label<input type="text" id="detail"/
<script type="text/javascript"
/*注册事件*/
if(document.addEventListener)
document.addEventListener('DOMMouseScroll',scrollFunc,false);//W3Cwindow.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
var scrollFunc=function(e)
e=e || window.event;
var t1=document.getElementById("wheelDelta");
var t2=document.getElementById("detail");
if(e.wheelDelta)//如果是IE/Opera/Chrome浏览器
t1.value=e.wheelDelta;
else if(e.detail)//如果是Firefox浏览器
t2.value=e.detail;</script
通过运行上述代码我们可以看到：
在 Firefox 中使用detail，其余浏览器使用的是wheelDelta；两者虽在取值上不一致，但实际意思是一样的，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。
在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3
代码部分如下，e.wheelDelta是判断是否为非firefox浏览器，e.detail判别为是firefox浏览器
if(e.wheelDelta)//IE/Opera/Chrome
t1.value=e.wheelDelta;本回答被提问者采纳

移动端怎么用JS判断是手势是向上滑动还是向下滑动

参考技术A 　　var divTwo = $('.divTwo');
　　//1.禁用div的滚轮事件
　　$('.divTwo').mousewheel(function (e) 
　　return false;
　　);
　　//2.如果滚动条到底底部的时候 禁用window的滚轮滚动
　　//3.判断滚动的方向
　　divTwo.mousewheel(function (e, delta) 
　　var decoration = delta > 0 ? 'Up' : 'down';
　　$('.divFixed').text(decoration);
　　var scrollTop = divTwo.scrollTop();
　　var scrollHegiht = divTwo[0].scrollHeight;
　　var height = divTwo.height();
　　//滚动条 到底部且 滚轮向下滚动
　　if (scrollTop + height >= scrollHegiht && delta < 0) 
　　e.preventDefault();
　　
　　//滚动条 到顶部 且滚轮向上
　　else if (scrollTop == 0 && delta > 0) 
　　e.preventDefault();
　　
　　);
　　$(document).mousewheel(function (e, delta) 
　　$('.divFixed').text(delta);
　　);
　　有一个mousewheel.js插件可以实现你说的功能。这是你需要的判断向上或者向下滚动的代码。希望对你有帮助，或者你直接百度一下mousewheel看一下具体的代码。

本回答被提问者采纳