js滚轮事件需要注意的兼容性问题

Posted ALI-LILI

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js滚轮事件需要注意的兼容性问题相关的知识,希望对你有一定的参考价值。

<!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阻止浏览器默认行为,遇到绑定添加的事件的时候就失效了;
所有要用oEvent.preventDefault();在使用此方法前要做判断;
------------------------------------------------------------------
if(window.navigator.userAgent.indexOf(Firefox) !=-1){ obj.addEventListener(DOMMouseScroll,wheel,false);注:所有以DOM开头的只能通过事件绑定的形式添加此事件; }else{ addEvent(obj,mousewheel,wheel); } }
-------------------------------------------------------------------------------------------------
  obj.onmousewheel:滚动鼠标滚轮的时候触发;兼容IE系列和chrome;
DOMMouseScroll:只能通过事件绑定的形式添加此事件;只兼容FF;
兼容性问题解决方案:判断浏览器;
oEvent.wheelDelta:不兼容FF;火狐下报undefined;
chrome&&IE:
下:-120;//以具体弹出数字为准
上:120;

oEvent.detail:
FF:
下:3;//以具体弹出数字为准
---------------------------------------------------------------------------------------------------
     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>
滚轮事件的兼容性问题比较多,所以大家在实现这个效果的时候也要随时测试兼容性的问题。
暂时整理的大概就这些,还有很多不足的地方,大家多提宝贵意见!^_^


































以上是关于js滚轮事件需要注意的兼容性问题的主要内容,如果未能解决你的问题,请参考以下文章

js滚轮事件兼容写法

阻止默认事件,滚轮事件与滚动事件

学鼠标滚轮事件兼容写法

监听鼠标滚轮事件

求大神指点jquery鼠标滚轮事件的使用方法,小白(html)一枚,求赐教

关于禁止页面滚动的实践(禁止滚轮事件)