Angular 11中MatTooltip交互后数字输入框滚动行为异常问题

针对你遇到的input[matInput][type="number"]在MatTooltip交互后，聚焦时滚轮会修改数值而非滚动页面的问题，以下是两种可行的解决方案：

方案一：自定义指令全局拦截（推荐） #

创建专属指令，自动对所有符合条件的数字输入框生效，统一处理滚轮事件：

1. 创建指令文件prevent-number-scroll.directive.ts：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: 'input[matInput][type="number"]'
})
export class PreventNumberScrollDirective {
  @HostListener('wheel', ['$event'])
  handleWheelEvent(event: WheelEvent): void {
    // 阻止输入框默认的滚轮增减数值行为
    event.preventDefault();
    // 触发页面滚动，保持原有滚动方向和幅度
    window.scrollBy({
      top: event.deltaY,
      behavior: 'auto'
    });
  }
}

2. 在你的共享模块或根模块中声明并导出该指令：

import { NgModule } from '@angular/core';
import { PreventNumberScrollDirective } from './prevent-number-scroll.directive';

@NgModule({
  declarations: [PreventNumberScrollDirective],
  exports: [PreventNumberScrollDirective]
})
export class SharedModule {}

完成后，所有带有matInput和type="number"的输入框都会自动应用该行为，无需额外修改模板。

方案二：全局事件监听（快速临时修复） #

如果不想新增指令，可以在根组件中添加全局事件监听：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app-root.component.html'
})
export class AppRootComponent implements OnInit {
  ngOnInit(): void {
    document.addEventListener('wheel', (event) => {
      const target = event.target as HTMLInputElement;
      // 仅对聚焦状态下的mat数字输入框生效
      if (target.tagName === 'INPUT' && target.type === 'number' && target.hasAttribute('matinput') && document.activeElement === target) {
        event.preventDefault();
        window.scrollBy({
          top: event.deltaY,
          behavior: 'auto'
        });
      }
    }, { passive: false }); // 必须设置passive: false才能阻止默认行为
  }
}

问题根源说明 #

该异常是由于Angular Material Tooltip在交互过程中，修改了全局事件处理的优先级，导致数字输入框的原生滚轮增减数值行为被意外激活。通过手动阻止输入框的默认滚轮行为并触发页面滚动，可以强制保持一致的滚动体验。

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