滾輪事件是不同瀏覽器會有一點點區別,一個像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法綁定DomMouseScroll事件,其他的瀏覽器滾輪事件使用mousewheel,下面我來給大家具體介紹。
Firefox使用DOMMouseScroll,其他的瀏覽器使用mousewheel。滾動事件觸發時Firefox使用detail屬性捕捉滾輪信息,其他的瀏覽器使用wheelDelta。不知道為何在該問題上其他廠商和微軟的如此一致。Firefox可以使用addEventListener方法綁定DomMouseScroll事件。
elem.addEventListener(‘DOMMouseScroll’, func, false);IE和其他的主流瀏覽器可以使用傳統的事件綁定模型。但不要使用IE專有的attachEvent方法,其他主流瀏覽器并不識別微軟的這個方法。
?Firefox 鼠標滾輪向上滾動是-3,向下滾動是3
?IE 鼠標滾輪向上滾動是120,向下滾動是-120
?Safari 鼠標滾輪向上滾動是360,向下滾動是-360
?Opera 鼠標滾輪向上滾動是120,向下滾動是-120
?Chrome 鼠標滾輪向上滾動是120,向下滾動是-120
有人在Safari下做了一些測試:”只是滾動一圈的話,值為+-0.1,如果滾動地稍微快點的話(多滾動幾圈),這個值也會變大。 這是因為Mac OS下有鼠標滾輪加速功能。滾動一次,瀏覽器滾動1像素,滾動3次,瀏覽器卻滾動30像素”。同時他也對Camino(基于Gecko的內核引擎)進行研究:“與Safari相似(+- 0.3 to +-Infinity),雖然使用了與firefox相同的內核引擎,但結果這個delta值卻只在+-2.666666里浮動,無論滾動速度如何
其中經我測試:
IE/Opera屬于同一類型,使用attachEvent即可添加滾輪事件。
/*IE注冊事件*/
if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}
Firefox使用addEventListener添加滾輪事件
/*Firefox注冊事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
Safari與Chrome屬于同一類型,可使用HTML DOM方式添加事件
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
其中除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,其中正數表示為向上,負數表示向下。
滾動值:(IE/Opera)
滾動值:(Firefox)
var oTxt = document.getElementById("txt");
var scrollFunc = function (e) {
var direct = 0;
ee = 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
轉載自:http://www.2cto.com/kf/201502/376772.html
HTML中鼠標滾輪事件onmousewheel
IE/Opera屬于同一類型,使用attachEvent即可添加滾輪事件. /*IE注冊事件*/ if(document.attachEvent){ document.attachEvent('onm ...
js中鼠標滾輪事件詳解
js中鼠標滾輪事件詳解 ? (以下內容部分內容參考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠標滾輪控制輸入框取值中已使用 ...
鼠標滾輪事件 onmousewheel
1.fiefox:DOMMouseScroll ? ? ? ? ? ? ??detail ? ? ?detail*(-40)=wheelDelta 除了firefox之外:mousewheel ? ? ...
JavaScript中的鼠標滾輪事件詳解
JavaScript中的鼠標滾輪事件詳解/*Firefox注冊事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...
Winform 中panel的mousewheel鼠標滾輪事件觸發
如果將窗體或容器控件(如Panel控件)的AutoScroll屬性設置為True時,那么當窗體或Panel容不下其中的子控件時就會出現 滾動條,通過移動滾動條可以上下顯示出窗體或Panel中的全部內容 ...
js中的鼠標滾輪事件
## 事件對象 event 1 event事件對象,表示用來獲取事件的詳細信息,比如得到鼠標的橫坐標:事件對象.clientX(clientX是可視區坐標) window.onclick = func ...
鼠標滾輪事件MouseWheel
其實在大多數瀏覽器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
js整頻滾動展示效果(函數節流鼠標滾輪事件)
ttp://schemas.android.com/apk/res/android& ...
sql按照in中的順序進行排序 mysql
經測試以下三種情況,都可以. SELECT a.id,a.name as goods_name,a.logoimg,b.name as store_name FROM sh_goods a LEFT ...
haxe 嵌入swf 讀取里面的內容
首先安裝 swf 庫,運行命令: 命令提示符: haxelib install swf 在project.xml 加上
1.Linux下libevent和memcached安裝
1 下載libevent-2.0.22-stable.tar.gz,下載地址是:http://libevent.org/ 2 下載memcached,下載地址是:http://memcached ...