JS教程:判断滚轮滚动方向在各个浏览器中的表现

2016-02-20 01:05 44 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是JS教程:判断滚轮滚动方向在各个浏览器中的表现,一起来学习了解下吧!

【 tulaoshi.com - Web开发 】

/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}

Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件

其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式

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

detail与wheelDelta

判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。

plabel for="wheelDelta"滚动值:/label(IE/Opera)input type="text" id="wheelDelta" //p
plabel for="detail"滚动值:(Firefox)/labelinput type="text" id="detail" //p
script type="text/javascript"
var oTxt=document.getElementById("txt");
/***********************
* 函数:判断滚轮滚动方向
* 作者:walkingp
* 参数:event
* 返回:滚轮方向 1:向上 -1:向下
*************************/
var scrollFunc=function(e){
var direct=0;
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;
}
ScrollText(direct);
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
/script

Chrome

Firefox

IE(8)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

IE(6)

Opera

Safari

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160220/1633243.html

延伸阅读
标签: 浏览器
在IE浏览器中快速保存网页中的图片 现在网络上关于图片分享的网站越来越多,这也是因为图片相比文字更容易产生,不一定每个人都可以写出有质量的文字,但是每个人都很容易发布有意思的图片。 随着图片内容的增多,我们不免会将自己喜欢的图片保存到本地。以往在IE浏览器中,我们一般保存图片方法都是在图片上单击右键,然后选择图片...
标签: Web开发
建议学习jquery的朋友学习下,了解下思路。 主要方法:$.browser.['浏览器关键字'] 代码: 代码如下: script type="text/javascript" $(function() { if($.browser.msie) { $( function() { alert("this is msie"); }); } else if($.browser.safari) { $( function() { alert("this is safari!"); }); } else if($.browser.mozill...
标签: Web开发
1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-color上下按钮上三角箭头的颜色 scrollbar-base-color滚动条的基本...
标签: ASP
  豆腐制作 都是精品 http://www.asp888.net 豆腐技术站 我们知道可以使用样式表来控制页面的很多的属性,比如我们可以通过这样的CSS 来改变Button的背景颜色 input.colorbutton { font-size:9pt; background-color: white; color:rgb(0,0,128) ; } 然后我们在HTML代码中加入下面的代码: <input type=button class=colorbutton id=test...
标签: Web开发
关于获取各种浏览器可见窗口大小的一点点研究 script function getInfo() {     var s = "";     s += " 网页可见区域宽:"+ document.body.clientWidth;     s += " 网页可见区域高:"+ document.body.clientHeight;     s += " 网页可...

经验教程

437

收藏

64
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部