mousewheel与DOMMouseScroll

最新推荐文章于 2023-01-27 17:42:17 发布

最新推荐文章于 2023-01-27 17:42:17 发布 · 194 阅读

文章标签：

#mousewheel #DOMMouseScroll

js-兼容性差异专栏收录该内容

33 篇文章

订阅专栏

本文探讨了不同浏览器下滚轮事件的兼容性问题，包括mousewheel与DOMMouseScroll的区别及实现方式，通过判断浏览器类型来绑定合适的事件，并解析了如何识别滚轮的前后滚动方向。

最近在研究设计grid的时候，再再一次地遇到这个小问题。

----很多自己开发和编写过grid的时候会考虑自己渲染横向和纵向的scroller，然后给其绑定事件，这个就会遇到一个兼容性api的差异

1. mousewheel与DOMMouseScroll

这个应该有点经验的fe会知道这个api的差异。当然可能经验多一点点的人会看到以前的部分js的lib库在判断ff浏览器的时候用document.getBoxObjectFor这个特性去做（http://zhangyaochun.iteye.com/blog/1187180）这里附上昨天的记录。其实记录的本意是想告诫自己和所有同学虽然部分特性可能在你的browser.js的库里面很有效（代码量很完美），但是一旦浏览器版本升级，这样的特性是否还存在？所有还是建议规规矩矩的（navigator.userAgent）

2.上代码

//主要的是区分ff和其他浏览器去绑定事件
//思想来源于tangram和prototype

/*
*isGecko -- judge the browser is Gecko*
*@function*
*@return {Boolean}*
*you can also like prototype.js*
navigator.userAgent.indexOf('Gecko')>-1 && navigator.userAgent.indexOf('KHTML') == -1
*/
ZYC.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent);

//有了兼容性判断后下面就是对应绑定事件了
//1.自己定义一个wheel事件
function wheel(event){
         //先暂时不放出来
}

if(!ZYC.browser.isGecko){
   //绑mousewheel
}else{
  //ff去绑DOMMouseScroll
}

3、到目前位置还没用完全完成，虽然我们多知道，而且能判断当前浏览器，然后绑定事件了，那问题就来了

第一：我鼠标滚轴向前向后咋区分？
第二：里面是不是还有兼容性的问题？

我先放出上面 wheel事件里面的代码吧

//出现的event的属性后面会详细说明
function wheel(event){
      //获得滚轴的向前向后
    var num = event.detail? (- event.detail /3) : (event.wheelDelta /120);

}

其实从代码的角度我们大致可以看到：

有detail和wheelDelta的区别
还有单位制3还是120
为什么event.detail前面还有-（负号）
正负代表向前向后？

下面详细说一下：

1. mousewheel事件有event.wheelDelta

----------如果返回的是正的值就说明向上（前）滚动了，反之如果负值就向下（后）。

---------返回的值多是120的倍数，所以返回的值/120

2. DeltaDOMMouseScroll事件有event.detail

----------如果是负值说明向上（前）滚动了，反之如果是正值就向下（后）。 -------（这点和上面相反）

---------返回的值多是3的倍数，所以返回值/3