js判断鼠标上下滚动及停止滚动 

第一种情况（监听鼠标滚轮的停止）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="" content="">
  <title></title>
  <style>
  </style>
</head>

<body>
  <p>ok</p>

  <script>
   
 var moveWheel1 = true;
    var moveWheel2 = false;
    var wheelClock;
    function stopWheel(){
        if(moveWheel2 == true){
            console.log("滚轮停止了");
            moveWheel2 = false;
            moveWheel1 = true;
        }
    }
    function moveWheel(e){
      var e = e || window.event;
        if(moveWheel1==true){
          if(e.wheelDelta){
            if(e.wheelDelta > 0) {
              console.log("鼠标滚轮向上滚动")
            };
            if(e.wheelDelta < 0){
              console.log("鼠标滚轮向下滚动")
            }
          }
            moveWheel1 = false;
            moveWheel2 = true;
            wheelClock = setTimeout(stopWheel,200);
        }
        else {
            clearTimeout(wheelClock);
            wheelClock = setTimeout(stopWheel,150);
        }
      }
      document.addEventListener('wheel', moveWheel, false);
  </script>
</body>

</html>


第二种情况（按下鼠标，滚轮停止）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="" content="">
    <title></title>
    <style>
    </style>
</head>

<body>
    <p>ok</p>

    <script  type="text/javascript">
           var scrollFunc = function(e) {
                     var e = e || window.event;
                     if(e.wheelDelta) {   
                           if(e.wheelDelta > 0) {
                                alert("鼠标滚轮向上滚动");
                           }
                           if(e.wheelDelta < 0) {
                                alert("鼠标滚轮向下滚动");
                           }
                           if(e.wheelDelta  = 0){
                               alert('ppp')
                           }

                     } 
                }
                //    给页面绑定鼠标滚轮事件,针对火狐的非标准事件 
                window.addEventListener("DOMMouseScroll", scrollFunc)
                //    给页面绑定鼠标滚轮事件，针对Google，mousewheel非标准事件已被弃用，请使用 wheel事件代替
                window.addEventListener("wheel", scrollFunc)
                //    ie不支持wheel事件，若一定要兼容，可使用mousewheel
                window.addEventListener("mousewheel", scrollFunc)

            document.onmousedown = function(e){
                alert('鼠标滚轮停止')
            }

    </script>
</body>

</html>

 

posted @ 2021-04-22 13:52  封兴旺  阅读(2425)  评论(0)  编辑  收藏  举报

联系方式: 18274305123(微信同号)