菜单

JS如何判断鼠标向上依然向下滚动

2019年8月17日 - jQuery

剖断鼠标滚轮是向上或向下滚动,不一致的浏览器的分辨方法是不均等的,当前可比盛行的浏览器有
IE,Opera,Safari,Firefox,Chrome,在这一个标题上Firefox和其余浏览器的兑现格局是不雷同的。今后透过一个实际的躬行实践来深入分析这么些标题啊!
 
演示代码如下:

js怎么着决断滚轮的前后滚动,我们应该都见到过这种成效,用鼠标滚轮达成有些表单内的数字向上滚动就充实,向下滚动就减弱的操作,这种效果与利益是通过js对鼠标滚轮的平地风波监听来促成的。前些天轻便的商量了须臾间怎么样使用javascript来判定鼠标是前进滚动依旧向下滚动,简要共享。

<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
/*注册事件*/
if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
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;
    }else if(e.detail){//如果是Firefox浏览器
        t2.value=e.detail;
    }
}
</script>

第一,不得不说一下,因为分化的浏览器有两样的滚轮事件。首假如有二种,onmousewheel(firefox不帮忙)和DOMMouseScroll(唯有firefox帮衬),关于那四个事件这里不做详述,想要掌握的敌人请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件,所以在那么些历程中必要丰硕事件监听,代码如下:包容firefox选拔add伊芙ntListener监听。

通过运转上述代码大家得以看看:

/*注册事件*/
if(document.addEventListener){
 document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

在 Firefox
中应用detail,其他浏览器选择的是wheelDelta;两个虽在取值上不一样,但实际意思是均等的,detail与wheelDelta只各取七个值,detail只取±3,wheelDelta只取±120,当中正数表示为发展,负数表示向下。

别的判别滚轮向上或向下滚动在浏览器中也要思虑包容性,未来中国共产党第五次全国代表大会浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox
使用detail,别的四类使用wheelDelta;两个只在取值上不均等,代表意义却是一致的,detail只取±3,wheelDelta只取±120,个中正数表示为发展,负数表示向下。
 
具体的亲自过问代码如下所示:

在非firefox浏览器中,滚轮向上滚动重回的数值是120,向下滚动再次来到-120
 
而在firefox浏览器中,滚轮向上滚动重回的数值是-3,向下滚动重返3
 
代码部分如下,e.wheelDelta是决断是不是为非firefox浏览器,e.detail剖断为是firefox浏览器

<label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
<label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
<script type="text/javascript">
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;
    }else if(e.detail){//Firefox
        t2.value=e.detail;
    }
}
/*注册事件*/
if(document.addEventListener){
    document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
</script>
if(e.wheelDelta){//IE/Opera/Chrome
 t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
 t2.value=e.detail;
}

因此运营上述代码大家得以摄取以下结果:

您大概感兴趣的篇章

http://www.bkjia.com/jQuery/763982.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/763982.htmlTechArticle判断鼠标滚轮是向上或向下滚动,不同的浏览器的判别方式是不一样的,当前比较流行的浏览器有
IE,Opera,Safari,Firefox,Chrome,在那个问…

在非firefox浏览器中,滚轮向上滚动重临的数值是120,向下滚动再次来到-120
 
而在firefox浏览器中,滚轮向上滚动重返的数值是-3,向下滚动再次来到3
 
代码部分如下,e.wheelDelta是决断是还是不是为非firefox浏览器,e.detail为firefox浏览器

if(e.wheelDelta){//IE/Opera/Chrome
 t1.value=e.wheelDelta;
}else if(e.detail){//Firefox
 t2.value=e.detail;
}

您大概感兴趣的稿子

http://www.bkjia.com/jQuery/763948.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/763948.htmlTechArticlejs如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图