Angular 13中鼠标滚轮指令未触发问题求助

我之前也碰到过类似的情况，你的指令已经成功创建了，但滚轮事件没触发，主要是事件兼容性和事件传播这两个问题在搞鬼，咱们一步步来修复：

1. 更换为标准的滚轮事件监听 #

你现在用的mousewheel是非标准事件，现代浏览器（Chrome、Firefox、Edge）都支持标准的wheel事件，部分旧浏览器可能还需要兼容mousewheel或DOMMouseScroll，所以咱们把监听事件换成更通用的组合：

修改指令中的@HostListener部分：

@HostListener('wheel', ['$event']) // 标准滚轮事件
@HostListener('mousewheel', ['$event']) // 兼容Chrome/IE旧版本
@HostListener('DOMMouseScroll', ['$event']) // 兼容旧Firefox
onMouseWheel(event: WheelEvent | MouseEvent) {
  // 若需要自定义滚动逻辑，可取消注释阻止默认滚动行为
  // event.preventDefault();

  // 统一判断滚轮方向
  let scrollDirection: 'up' | 'down';
  if (event instanceof WheelEvent) {
    // 标准事件：deltaY为正表示向下滚动，负表示向上
    scrollDirection = event.deltaY > 0 ? 'down' : 'up';
  } else if ('wheelDelta' in event) {
    // Chrome/IE：wheelDelta为正表示向上滚动，负表示向下
    scrollDirection = (event as any).wheelDelta > 0 ? 'up' : 'down';
  } else if ('detail' in event) {
    // 旧Firefox：detail为正表示向下滚动，负表示向上
    scrollDirection = (event as any).detail > 0 ? 'down' : 'up';
  }

  console.log(`滚轮方向：${scrollDirection}`);
}

2. 检查事件传播是否被阻止 #

如果你的mat-table或者内部元素自带滚动逻辑，可能会阻止事件冒泡到父级的div元素。这时候可以给@HostListener添加capture: true选项，让指令在事件捕获阶段就监听事件，绕过冒泡阻止：

@HostListener('wheel', ['$event'], { capture: true })
@HostListener('mousewheel', ['$event'], { capture: true })
@HostListener('DOMMouseScroll', ['$event'], { capture: true })
onMouseWheel(event: WheelEvent | MouseEvent) {
  // 同上的滚轮方向处理逻辑
}

3. 确认元素是否能接收滚轮事件 #

另外要确保绑定指令的div元素是可以接收滚轮事件的：

• 如果div的overflow属性是hidden，且内部表格没有超出容器高度，滚轮事件可能不会触发（因为没有可滚动内容）
• 可以给div添加固定高度和overflow: auto来测试：

.data-table {
  height: 400px;
  overflow: auto;
}

测试验证 #

修改完代码后重新运行项目，滚动表格区域，应该就能看到控制台输出滚轮方向的日志了。

内容的提问来源于stack exchange，提问作者user5182503