js滾輪事件兼容性問(wèn)題需要注意哪些
更新時(shí)間：2016年11月15日 09:00:54 作者：ALI-LILI
這篇文章主要為大家詳細(xì)介紹了js滾輪事件需要注意的兼容性問(wèn)題,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家解析了js滾輪事件需要注意的兼容性問(wèn)題，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div {
width: 300px;
height: 300px;
background: red;
}
</style>
<script>
function addEvent(obj,sEv,fn){
if(obj.addEventListener){
return obj.addEventListener(sEv,fn,false);
}else{
return obj.attachEvent('on' + sEv,fn);
}
}
function addWheel(obj,fn){
function wheel(ev){
var oEvent = ev || event;
var bDown = true;
bDown = oEvent.wheelDelta?oEvent.wheelDelta > 0:oEvent.detail < 0;
fn && fn(bDown);
oEvent.preventDefault && oEvent.preventDefault();
return false;
}
------------------------------------------------------------------
return false阻止瀏覽器默認(rèn)行為，遇到綁定添加的事件的時(shí)候就失效了；
所有要用oEvent.preventDefault（）；在使用此方法前要做判斷；
------------------------------------------------------------------
if(window.navigator.userAgent.indexOf('Firefox') !=-1){
obj.addEventListener('DOMMouseScroll',wheel,false);注：所有以DOM開(kāi)頭的只能通過(guò)事件綁定的形式添加此事件；
}else{
addEvent(obj,'mousewheel',wheel);
}
}
-------------------------------------------------------------------------------------------------
obj.onmousewheel:滾動(dòng)鼠標(biāo)滾輪的時(shí)候觸發(fā);兼容IE系列和chrome;
DOMMouseScroll:只能通過(guò)事件綁定的形式添加此事件;只兼容FF;
兼容性問(wèn)題解決方案:判斷瀏覽器;
oEvent.wheelDelta:不兼容FF；火狐下報(bào)undefined;
chrome&&IE：
下：-120；//以具體彈出數(shù)字為準(zhǔn)
上：120；
oEvent.detail:
FF:
下：3；//以具體彈出數(shù)字為準(zhǔn)
---------------------------------------------------------------------------------------------------
window.onload = function () {
var oDiv = document.getElementById('div');
addWheel(oDiv,function(bDown){
oDiv.onmousewheel = null;
if(bDown){
oDiv.style.height = oDiv.offsetHeight - 10 + 'px';
}else{
oDiv.style.height = oDiv.offsetHeight + 10 + 'px';
}
});
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
滾輪事件的兼容性問(wèn)題比較多，所以大家在實(shí)現(xiàn)這個(gè)效果的時(shí)候也要隨時(shí)測(cè)試兼容性的問(wèn)題。
暫時(shí)整理的大概就這些，還有很多不足的地方，大家多提寶貴意見(jiàn)！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
一個(gè)Js文件函數(shù)中調(diào)用另一個(gè)Js文件函數(shù)的方法演示
這篇文章主要介紹了一個(gè)Js文件函數(shù)中調(diào)用另一個(gè)Js文件函數(shù)的方法,兩個(gè)javascript文件中相互調(diào)用函數(shù),主要是將引入的Js文件代碼放在</body>下面。具體操作方法可查看下文,需要的朋友可以參考下2017-08-08
javascript基本數(shù)據(jù)類型和對(duì)象類型歸檔問(wèn)題解析
這篇文章主要介紹了javascript基本數(shù)據(jù)類型和對(duì)象類型歸檔,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
真正好用的js驗(yàn)證上傳文件大小的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇真正好用的js驗(yàn)證上傳文件大小的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要為大家詳細(xì)介紹了js完整倒計(jì)時(shí)代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
JS中如何使用 filter() 方法過(guò)濾數(shù)組元素
filter()方法是JavaScript中用于過(guò)濾數(shù)組元素的常用方法,它接受一個(gè)回調(diào)函數(shù)作為參數(shù),返回一個(gè)新數(shù)組,本文總結(jié)了使用filter()方法的最佳實(shí)踐,感興趣的朋友一起看看吧2025-01-01
js通過(guò)var定義全局變量與在window對(duì)象上直接定義屬性的區(qū)別說(shuō)明
這篇文章主要介紹了js通過(guò)var定義全局變量與在window對(duì)象上直接定義屬性的區(qū)別說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
JS實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)隨機(jī)生成驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
javascript實(shí)現(xiàn)樹(shù)形菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)樹(shù)形菜單的方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素與節(jié)點(diǎn)屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
js復(fù)制網(wǎng)頁(yè)內(nèi)容并兼容各主流瀏覽器的代碼
js 復(fù)制網(wǎng)頁(yè)內(nèi)容的方法代碼有很多不過(guò)要兼容各瀏覽器就不多了，下面有個(gè)不錯(cuò)的方法，大家可以嘗試操作下2013-12-12
Javascript 實(shí)現(xiàn)匿名遞歸的實(shí)例代碼
本篇文章主要介紹了Javascript 實(shí)現(xiàn)匿名遞歸的實(shí)例代碼，利用 arguments.callee 來(lái)實(shí)現(xiàn)匿名遞歸的方式。有興趣的可以了解一下2017-05-05