2016.01.02JS滚轮事件详解

本人第一次写博客，有写的不好的地方请大家指正哈，也是刚刚学到的写一下印象稍微的深刻一下，好了废话不多说进入正题；

JS滚轮事件还是一个比较复杂的东西，主要分为两个版本：

1.ie /chrome 下使用的是onmousewheel事件；

2.火狐浏览器下是不支持这个事件的，其实现这个事件的方法主要是通过事件监听来实现的， DOMMouseScroll这个事件，使用方法：obj.addEventListener('DOMMouseScroll',fn,false);

那么我们如何实现兼容所有的浏览器呢？上代码

obj.onmosewheel = fn;

if(obj.addEventListener){//判断是否支持此事件，因为在非标准下ie浏览器是不认这个会报错

obj.addEventListener('DOMMouseScroll',fn,false);

}

function fn(){

alert(1);

}

这要就实现了兼容多个浏览器！但是这个两个属性并没有结束，他们的差异还不止这些；他们还有一个属性是监听他们向上滚动和向下滚动的属性

function fn(ev){

var ev = ev || event;//兼容性处理支持firefox

var dir = true; //true表示向上 false向下

/* 

ie /chrome下面:

ev.wheelDelta

向上滑动：120

向下滑动：-120

ev.detail

向上滑动：-3

向下滑动：3

两个属性向上和向下滚得时候两个值都不同，大小正负还不一样！

*/

if(ev.wheelDelta ){//这样就实现了滚动的方向判断

dir = ev.wheelDelta > 0 ? true : false;

}else{

dir = ev.detail < 0 ? true : false;

}

if(ev.preventDefault){//必须判断一下在非标准ie下会报错

ev.preventDefault();

}

if(dir){

alert('向上滚动');

}else{

alert('向下滚动');

}

alert(1);

}

这样子做还是存在一个问题得当浏览器自身出现滚动条时我们这回就必须去阻止浏览器的默认事件单纯的return false是不能组织这个浏览器的默认事件的；retrun false;只能阻止obj.on事件 = fn 所触发的默认行为而addEventListener事件绑定的默认事件必须用ev.preventDefault();

好了这就是一个完美的滚轮事件了，具体应用可以自己去想想还是蛮多地方要用到的，第一次写博客纯手打，哪里写错了望指正！