'mousewheel与DOMMouseScroll'

mousewheel-DOMMouseScroll

最近在写vue的项目中涉及到了鼠标滚轮事件,之前没有用到过,所以踩了踩坑,想了想就写了一篇关于滚轮事件的文章。

踩坑

起先我是不知道关于滚轮事件是有兼容的,当时我只写了@mousewheel一种方法,满心欢喜去迎接马上到来的幸福生活。
先测了测chrome,没有问题完美实现。接下来是firefox,哎没有反应,我想了下肯定是姿势不对,再来一遍,漂亮,还是
没有反应,这个时候我想到了可能是有兼容,百度了下发现确实是有兼容,原来兼容分为两种,一种是firefox,一种是其他。
其他用到的是mousewheel而firefox用的是DOMMouseScroll。
下面是用到的部分代码

handleScroll (e) {
  let type = e.type;
  if (type === 'DOMMouseScroll' || type === 'mousewheel') {
    eventDelta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 40;
  }
  if (eventDelta > 0) {
    this.left = Math.min(0, this.left + eventDelta);
  } else {
    if ($containerWidth - padding < $wrapperWidth) {
      if (this.left < -($wrapperWidth - $containerWidth + padding)) {
        this.left = this.left;
      } else {
        this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding);
      }
    } else {
      this.left = 0;
    }
  }
}

我要说的是其他的滚动是根据e.wheelDelta作为判断条件,其中向上滚动是120,而向下滚动则取反是-120。而firefox判断滚轮方向
e.detail,向上判断是-3,向上则取反为3。

这个时间祭出大杀器推荐大家张鑫旭的博客关于鼠标滚动更好的总结。
张鑫旭-关于鼠标滚轮事件