鼠标滚轮事件

鼠标滚轮事件有兼容性的问题,主要是firfox和其他浏览器的差异,以下就这两种情况分开说明:

其他浏览器

事件名称: mousewheel
事件对象相关属性: event.wheelDelta

  • 向上: 120
  • 向下: -120

firfox

事件名称: DOMMouseScroll
事件对象相关属性: event.detail

  • 向上: -3
  • 向下: 3

判断滚动方向

可以看到在firfox和其他浏览器中,代表向上还是向下滚动的值的数值不同,而且正负也不同。

我们可以使用boolean值代表方向,向上为true, 向下为false。

function onMouseScroll(e){
  var isUp = true;
  if(e.wheelDelta && e.wheelDelta<0  || e.detail>0 ){
      isUp = false;
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 13.1 事件流 “DOM2级事件”规定事件流包括3个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。事件捕获表示...
    Elevens_regret阅读 462评论 0 0
  • 使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题其中火狐浏览器事件为:"DOMMousescrol...
    小雞雞炖蘑菇阅读 429评论 1 2
  • 通过一个小例子来介绍鼠标的滚轮事件,通过鼠标向上滚动来放大图片,向下滚动来缩小图片下面是HTML文档 下面是封装的...
    likeli阅读 286评论 1 1
  • 题目 Given an array of integers sorted in ascending order, ...
    persistent100阅读 141评论 0 0
  • 海水枯了 无人问津的死掉的浪 沉睡在土地 场景飘回二十年代 那冗长的 一个镜头接着一个镜头的默片 起风了 空气填满...
    千城子阅读 284评论 0 0