鼠标滚轮事件mousewheel和DOMMouseScroll

不同浏览器滚动事件信息获取与判断

最新推荐文章于 2023-02-26 12:59:50 发布

原创最新推荐文章于 2023-02-26 12:59:50 发布 · 725 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#firefox #safari #前端

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

博客介绍了不同浏览器滚动事件信息的获取方式。非Firefox使用mousewheel，通过event.wheelDelta获取滚动信息；Firefox使用DOMMouseScroll，通过event.detail获取。还说明了可通过window.navigator.userAgent判断设备及浏览器版本，以及根据event.wheelDelta是否有值判断是否为Firefox，同时提到要阻止默认事件。

非Firefox：mousewheel，可通过event.wheelDelta获取滚动信息，正数：向上滚动，负数：向下滚动，滚动一次值为正负120
Firefox：DOMMouseScroll，可通过event.detail获取滚动信息，与别的浏览器相反，正数：向下滚动，负数：向上滚动；滚动一次值为正负3

可以通过 window.navigator.userAgent 来判断当前设备及浏览器版本号

/firefox/i.test(window.navigator.userAgent) ? 'Firefox' : '非Firefox'

判断event.wheelDelta是否有值？有则非Firefox，无则相反~

  const mousewheelHandler = (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {
    const delta = e.wheelDelta ? e.wheelDelta : -e.detail // 考虑Firefox
    if (delta > 0) { // 向上
      xxx
    } else { // 向下
      xxx
    }
  }

需要注意的是，由于滚动事件的特殊性，触发时并不知道你是想正常的滚动页面还是进行特定操作，需要阻止默认事件

详情参考：

Element: mousewheel event - Web APIs | MDN