js滚轮事件兼容性问题需要注意哪些
本文实例为大家解析了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>
滚轮事件的兼容性问题比较多，所以大家在实现这个效果的时候也要随时测试兼容性的问题。
暂时整理的大概就这些，还有很多不足的地方，大家多提宝贵意见！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍RabbitMQ 集群搭建需要注意哪些问题？相关面试题，主要包含被问及RabbitMQ 集群搭建需要注意哪些问题？时的应答技巧和注意事项，需要的朋友参考一下 各节点之间使用“–link”连接，此属性不能忽略。 各节点使用的 erlang cookie 值必须相同，此值相当于“秘钥”的功能，用于各节点的认证。 整个集群中必须包含一个磁盘节点。
-
本文向大家介绍前端需要注意哪些SEO?相关面试题，主要包含被问及前端需要注意哪些SEO?时的应答技巧和注意事项，需要的朋友参考一下 合理的title，description，keyswords 搜索引擎对这三项的权重逐个减小，title 值强调重点即可，重要的关键 词出现不要超过两次，而且要靠前。 2 、不同页面的tilte要有所不同；description把页面的内容高度概括，长度合适，不可过分
-
我一直在我的笔记本电脑上使用lwjgl和GLSL 1.3进行一个项目。我的着色器在我的笔记本电脑上编译得很好，但是，当尝试在我的桌面上编译相同的着色器时，它有一个更新的显卡，我收到一个错误，说明着色器无法编译，因为着色器中存在错误。但是，着色器日志不会输出任何错误。我认为GLSL向后兼容它自己。 返回 我假设它与标准的GLSL 3.30相同。这是一个示例vertandfrag着色器，它适用于我的笔
-
本文向大家介绍jquery选择器需要注意的问题，包括了jquery选择器需要注意的问题的使用技巧和注意事项，需要的朋友参考一下 我们先来看段代码，很简单,如下 $("#div1 span")获得三个对象的数组 1.如果执行 $("#div1 span").html("aaa"),则数组内的所有对象都会改变.如下图 2.如果执行$("#div1 span").html(),只取值的话,则只会取数组第
-
本文向大家介绍oralce和db2兼容开发注意事项，包括了oralce和db2兼容开发注意事项的使用技巧和注意事项，需要的朋友参考一下 数据库兼容，在开发项目过程中，难免会遇到 更改数据库，或者后期 项目升级，也可能会遇到这种情况，这里就说明下oralce和db2兼容开发注意事项。 兼容oralce、db2开发注意事项（前提是db2版本是9.7，且是开启PLSQL编译选项之后创建的数据库)： 1
-
本文向大家介绍js滚轮事件 js自定义滚动条的实现，包括了js滚轮事件 js自定义滚动条的实现的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js自定义滚动条的实现的具体代码，供大家参考，具体内容如下 描述： 自定义滚动条的实现 效果： 实现： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。