Question

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

我做了一个Angular指令来触发'wheel'事件，并用节气门时间调用定义滚动方向的函数。

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

这是我的指令的工作方式

@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

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

Firefox中的鼠标“滚轮”事件在完全滚动时会冻结，但在Chrome中不会冻结

0 个答案: