标签：use htm ack mouse span pre scroll strong firefox
应项目需求，运用了监听滚轮的事件，发现在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。
标签：use htm ack mouse span pre scroll strong firefox
原文地址：http://www.cnblogs.com/Gaoswatou/p/6910647.html
