javascript - Firefox 中的鼠标“滚轮”事件在完全滚动时冻结，但在 Chrome 中没有

Question

我对 Firefox 的鼠标事件有疑问。我想像 Fullpage.js 那样创建一个由幻灯片组成的网站，但我不想使用它，我选择自己实现该系统。但在 Firefox 中，滚动事件似乎会因几个触发的鼠标滚轮事件而停止，因此会冻结动画。

我制作了一个 Angular 指令来触发“轮子”事件，并以节流时间调用定义滚动方向的函数。

然后，我创建了一个调用该指令并定义如何处理其结果的组件。

这就是我的指令的工作方式

@Directive({ selector: '[appMouseWheel]' })
export class MouseWheelDirective implements OnInit {
  @Output() mouseWheelUp = new EventEmitter();
  @Output() mouseWheelDown = new EventEmitter();


  private mouse = new Subject<any>();
  private mouseObs = this.mouse.asObservable();

  @HostListener('wheel', ['$event']) onMouseWheel(event: any) {
    console.log('debounce');
    event.preventDefault();
    this.mouse.next(event);
  }

  public ngOnInit() {
    this.mouseObs.pipe(throttleTime(1000)).subscribe(x => this.mouseWheelFunc(x));
  }

  public mouseWheelFunc(event: any) {
    const delta = Math.max(-1, Math.min(1, (-event.deltaY || -event.detail)));

    if (delta > 0) {
      this.mouseWheelUp.emit(event);
    } else if (delta < 0) {
      this.mouseWheelDown.emit(event);
    }

    if (event.preventDefault) {
      event.preventDefault();
    }
  }
}

它与 Chrome 完美配合，但与 Firefox 一起冻结，您可以在这里看到：http: //ukeep.monteil.co

如果有人有答案，我将不胜感激！

标签： javascriptangularfirefoxmousewheel