首页 > 代码库 > 监听鼠标滚轮（js+jq），xp系统下也OK
监听鼠标滚轮（js+jq），xp系统下也OK
应项目需求，运用了监听滚轮的事件，发现在xp系统下使用jquery的mousewheel.js来做，会导致无论滚轮怎么滚，都只能向下滚。。。后面使用了原生js的，就可以了。
jquery：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>鼠标滚轮_jquery</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> <style> #did { width: 100px; height: 100px; background-color: #0ff; } </style></head><body> <div id="did"></div> <label for="detail">滚动方向:</label><input type="text" id="detail" /></body><script> $(document).ready(function () { $("#did").on(‘mousewheel‘, function (event, delta) { var dir = delta > 0 ? ‘向上‘ : ‘向下‘; $("#detail").val(dir) }); });</script></html>
原生js（xp系统下用这个）：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>鼠标滚轮_原生js</title></head><style> #did { width: 100px; height: 100px; background-color: #0ff; }</style><body> <div id="did"></div> <label for="wheelDelta">滚动方向:</label>(IE/Opera)<input type="text" id="wheelDelta" /><br> <label for="detail">滚动方向:(Firefox)</label><input type="text" id="detail" /></body><script> 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 < 0 ? ‘向下‘ : ‘向上‘; } else if (e.detail) { //Firefox t2.value = e.detail < 0 ? ‘向上‘ : ‘向下‘; } } /*注册事件*/ if (document.getElementById("did").addEventListener) { document.getElementById("did").addEventListener(‘DOMMouseScroll‘, scrollFunc, false); } //W3C document.getElementById("did").onmousewheel = scrollFunc; //IE/Opera/Chrome</script></html>
G~ G~ Study。
监听鼠标滚轮（js+jq），xp系统下也OK
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。