Блог

У меня проблема с событием мыши в Firefox. Я хочу создать веб-сайт, состоящий из слайдов, как Fullpage.js делает, но я не хочу его использовать, и я решил сам внедрить систему. Но в Firefox событие прокрутки, похоже, останавливается несколькими запущенными событиями колеса мыши и, следовательно, анимацией замораживания.

Я создал угловую директиву, которая запускает событие «колесо» и вызывает с заданным временем функцию, определяющую направление прокрутки.

Затем я создал компонент, который вызывает эту директиву и определяет, что делать с ее результатом.

Вот как работает моя директива

 @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

Если у кого-нибудь есть ответ, я буду благодарен!