diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html
index 4ca82adc63..beac0b6bb8 100644
--- a/aio/src/app/app.component.html
+++ b/aio/src/app/app.component.html
@@ -57,7 +57,7 @@
 
 </mat-sidenav-container>
 
-<div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (mousewheel)="restrainScrolling($event)">
+<div *ngIf="hasFloatingToc" class="toc-container no-print" [style.max-height.px]="tocMaxHeight" (wheel)="restrainScrolling($event)">
   <aio-lazy-ce selector="aio-toc"></aio-lazy-ce>
 </div>
 
diff --git a/aio/src/app/app.component.spec.ts b/aio/src/app/app.component.spec.ts
index c7928ad7f5..2c15a491c4 100644
--- a/aio/src/app/app.component.spec.ts
+++ b/aio/src/app/app.component.spec.ts
@@ -667,7 +667,7 @@ describe('AppComponent', () => {
 
       it('should restrain scrolling inside the ToC container', () => {
         const restrainScrolling = spyOn(component, 'restrainScrolling');
-        const evt = new MouseEvent('mousewheel');
+        const evt = new WheelEvent('wheel');
 
         setHasFloatingToc(true);
         expect(restrainScrolling).not.toHaveBeenCalled();