监听鼠标滚轮（js+jq），xp系统下也OK

Posted 2020-09-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了监听鼠标滚轮（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的主要内容，如果未能解决你的问题，请参考以下文章