How to fix “ Property 'wheelDelta' does not exist on type 'WheelEvent' ” while upgrading to angular 7,rxjs6?

Question

I'm upgrading to angular7 with rxjs6: in mouseWheelEvent type I am getting "Property 'wheelDelta' does not exist on type 'WheelEvent'".

Do we have any alternative for wheelDelta?

mouseWheelFunc(event: MouseWheelEvent): void {

    //  var event = window.event || event; // old IE support

    let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

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

    // for IE
    event.returnValue = false;
    // for Chrome and Firefox
    if ( event.preventDefault) {
      event.preventDefault();
    }
  }

ERROR in src/modules/components/numeric-stepper/mousewheel.directive.ts(23,49): error TS2339: Property 'wheelDelta' does not exist on type 'WheelEvent'.

Answer 1

It seems like WheelEvent doesn't have this property anymore as it says. Now they added deltaY and deltaX.

Now you have to access event.deltaY instead of event.wheelData.

But deltaY has the opposite value of wheelData. That means when wheelData on the event was positive (scroll up) deltaY will be a negative number, and vice versa.

Example:

Change this:

        zoomScroll(event: WheelEvent) {
            if (event.wheelDelta > 0) {
                this.zoomIn();
            } else if (event.wheelDelta < 0) {
                this.zoomOut();
            }
        }

For this:

       zoomScroll(event: WheelEvent) {
           if (event.deltaY < 0) {
               this.zoomIn();
           } else if (event.deltaY > 0) {
               this.zoomOut();
           }
    }

source: https://github.com/Microsoft/TypeScript/issues/9071