javascript鼠标滚动事件中出现的问题

最新推荐文章于 2021-03-09 16:01:03 发布

原创最新推荐文章于 2021-03-09 16:01:03 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #鼠标 #html

javascript 专栏收录该内容

40 篇文章

订阅专栏

当页面内容超出屏幕高度并出现滚动条时，如何在滚动局部内容时不触发浏览器默认的滚动行为。解决方案包括针对IE, Opera, Chrome的禁止和解除禁止默认滚动，以及Firefox的处理方式。注意错误的绑定和解除绑定方法会导致问题。" 123594901,7870798,小样本学习：GNN在图神经网络中的应用,"['小样本', 'gnn', '深度学习', '图神经网络', '计算机视觉']

</pre>滚动事件精简代码：<p></p><p></p><pre name="code" class="javascript">//鼠标滚轮事件
var box = document.getElementById("box");
var scrollFn = function(e){
    e = e || window.event;
    if(e.wheelDelta){                   // e.wheelDelta 兼容IE-Opera-Chrome 
        if(e.wheelDelta > 0){           //如果 e.wheelDelta > 0 在IE-Opera-Chrome下代表向上滚动“而火狐下代表向下滚动”
            console.log("IE-Opera-Chrome向上滚动");
        }else{
            console.log("IE-Opera-Chrome向下滚动");  //e.wheelDelta < 0  则反之
        }
    }else if(e.detail){                 // e.detail 兼容Firefox
        if(e.detail < 0){           // 为了兼容Firefox 和 IE-Opera-Chrome 在火狐下需要时应反着判断    e.detail < 0    
            console.log(e.detail+"Firefox向上滚动，");            
        }else{
            console.log(e.detail+"Firefox向下滚动，");  
        }
    }
}

//box为 “局部块” 的临时命名（需根据需求命名更改）
 box.onmousemove = function(){
     
    /*绑定事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFn,false);   // 绑定 Firefox 滚动事件 
    } 
    window.onmousewheel=document.onmousewheel=scrollFn;// 绑定 IE-Opera-Chrome 滚动事件 
 
}

box.onmouseleave=function(){
    
    /*解除事件*/
    if(document.addEventListener){
       document.removeEventListener('DOMMouseScroll',scrollFn,false);//解除 Firefox 滚动事件 
    }
    window.onmousewheel=document.onmousewheel=null;// 解除 IE-Opera-Chrome 滚动事件
    
    
}

看似完成了滚动：

有时候我们会碰到这样的情况：

body内容超出了屏幕高度，自动出现滚动条，那么我们在滚动局部内容时，会同时触发到body的浏览器自带滚动，怎么办？？？

----------------------------------------------------------------------------------------------------------------------------------------------------------

解决办法如下：

IE-Opera-Chrome禁止浏览器默认滚动条：

getBody.onmousewheel=function(){                    //IE/Opera/Chrome禁止body滚动
        return false;
    }

IE-Opera-Chrome “解除”禁止浏览器默认滚动条：

getBody.onmousewheel=function(){                    //IE/Opera/Chrome 解除body滚动条
        return true;
    }

Firefox禁止浏览器默认滚动：

首先定义一个全局变量：

// 禁止火狐body默认滚动事件
var bodyMoveFun = function(e){
    e.preventDefault();
}

再绑定禁止事件函数：

document.addEventListener("DOMMouseScroll",bodyMoveFun,false);  //Firefox禁止body滚动

Firefox “解除” 禁止浏览器默认滚动：

document.removeEventListener('DOMMouseScroll',bodyMoveFun,false);//解除Firefox禁止body滚动

错误方法如下：

如果写成这样将会无法绑定和解除：

document.addEventListener("DOMMouseScroll",function(e){
<span style="white-space:pre">	</span>e.preventDefault();
},false);