【JavaScript】 e.deltaY e.wheelDeltaY 在mac上缩放只能放大或者放小问题

最新推荐文章于 2025-05-01 10:00:00 发布

原创最新推荐文章于 2025-05-01 10:00:00 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #ecmascript

JavaScript/TypeScript 专栏收录该内容

36 篇文章

订阅专栏

文章讨论了在Mac和Windows系统中滚轮事件的deltaY值不一致的问题，以及Chrome和Firefox浏览器下使用e.deltaY和e.wheelDeltaY的差异。为了解决这个问题，代码示例提供了一种方法来统一滚轮方向的判断，无论是向上滚动还是向下滚动，都以正值和负值表示缩放操作。

mac 的 e.deltaY 值和win是不相同的，因此不能用具体数值(win滚轮向上是e.deltaY是-100，e.wheelDeltaY是120)判断

// mac 和 win 上的值不一样 只能判断是否大于小于0
  console.log('e.deltaY', e.deltaY);
  console.log('e.wheelDeltaY', e.wheelDeltaY);
  // 浏览器兼容 chrome 为e.deltaY  firefox 为e.wheelDeltaY
  // 统一向上滚动为正值，向下滚动为负值
  let dy = -e.deltaY || e.wheelDeltaY;
  if (dy < 0) {
    console.log('缩小');
    scaleData.scale -= scaleData.scaleNum;
  } else {
    console.log('放大');
    scaleData.scale += scaleData.scaleNum;
  }