Событие «колеса мыши» в Firefox останавливается при полной прокрутке, но не в Chrome - PullRequest
Новая
       24

Событие «колеса мыши» в Firefox останавливается при полной прокрутке, но не в Chrome

1 голос
/ 11 апреля 2019

У меня проблема с событием мыши в 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

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

...