js判斷鼠標上下滾動及停止滾動

本文轉載自查看原文 2021-04-22 13:52 310 JavaScript

第一種情況（監聽鼠標滾輪的停止）：

<!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>

<style>

</style>

</head>

<body>

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 監聽鼠標上下滾動事件監聽鼠標上下滾動事件 JS判斷鼠標向上滾動還是向下滾動 JS 判斷鼠標滾輪的上下滾動如何使tmux能夠使用鼠標上下滾動？ JS判斷滾動條是否停止滾動 js 判斷滾動條是否停止滾動 js判斷用戶是否正在滾動滾動條，滾動條滾動是否停止 JS鼠標滾輪判斷向上還是向下滾動 JS如何判斷鼠標滾輪向上還是向下滾動