微客导航 » 文章资讯 » js实现鼠标滑动到某个div禁止滚动

js实现鼠标滑动到某个div禁止滚动

2023-07-16 14:29:03 327

本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码，供大家参考，具体内容如下

项目中碰到一个场景就是当鼠标滑倒某个div的时候，滑动鼠标页面不再滚动。

这里主要是当鼠标滑动到该div时，监听滚轮事件并通过preventDefault()事件来阻止滚动事件，以下是例子

eg:

#wrap{
position:absolute;
top:200px;
background:#000000;
font-size:40px;
width:50vw;
text-align:center;
color:#ffffff;
line-height:300px;
height:300px;
}


鼠标移动进入该区域，页面禁止滚动

window.onload=function(){
for(i=0;i<50;i++){
varx=document.createElement('div');
x.innerHTML="test
";
document.body.appendChild(x);
}

function$(x){
returndocument.getElementById(x);
};
$("wrap").onmousewheel=functionscrollWheel(e){
varsl;
e=e||window.event;
if(navigator.userAgent.toLowerCase().indexOf('msie')>=0){
event.returnValue=false;
}else{
e.preventDefault();
};
};
if(navigator.userAgent.toLowerCase().indexOf('firefox')>=0){
//firefox支持onmousewheel
addEventListener('DOMMouseScroll',
function(e){
varobj=e.target;
varonmousewheel;
while(obj){
onmousewheel=obj.getAttribute('onmousewheel')||obj.onmousewheel;
if(onmousewheel)break;
if(obj.tagName=='BODY')break;
obj=obj.parentNode;
};
if(onmousewheel){
if(e.preventDefault)e.preventDefault();
e.returnValue=false;//禁止页面滚动
if(typeofobj.onmousewheel!='function'){
//将onmousewheel转换成function
eval('window._tmpFun=function(event){'+onmousewheel+'}');
obj.onmousewheel=window._tmpFun;
window._tmpFun=null;
};
//不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function(){
obj.onmousewheel(e);
},
1);
};
},
false);
};
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

js实现鼠标滑动到某个div禁止滚动

热门推荐

随机推荐