Angular 5项目在Chrome中出现滚动事件违规提示求助

Hey there! Let's work through getting rid of that Chrome warning about scroll-blocking mousewheel events in your Angular 5 app. I've dealt with this exact issue before, and it mostly ties back to how Zone.js wraps event listeners and some third-party libraries not using passive event options properly.

What's causing this? #

Chrome throws this warning when it detects an event listener (like mousewheel) that could block scrolling, making your page feel less responsive. By marking the listener as passive, you're telling the browser it can start scrolling immediately without waiting for the event handler to finish. In Angular apps, Zone.js automatically wraps most event listeners, so we need to configure it to handle passive events correctly.

Step-by-Step Solutions #

1. Upgrade Zone.js to a passive-event-friendly version

Your current zone.js version is 0.8.19—later versions in the 0.8.x branch (fully compatible with Angular 5) added native support for passive events. Let's upgrade:

npm install zone.js@0.8.29 --save

This is the simplest fix, as newer Zone.js versions handle passive events out of the box for common scroll/touch events.

2. Configure Zone.js to mark specific events as passive

If upgrading alone doesn't clear the warning, add this configuration to your src/polyfills.ts file:

// Existing Zone.js import (already present in your polyfills.ts)
import 'zone.js/dist/zone'; 

// Add this line to define which events should be treated as passive
(window as any).__zone_symbol__PASSIVE_EVENTS = ['mousewheel', 'wheel', 'touchstart', 'touchmove'];

This tells Zone.js to wrap these events as passive listeners, eliminating the violation warning.

3. Check third-party libraries for non-passive bindings

You're using jQuery and ng4-geoautocomplete—these might be binding mousewheel events without the passive option. Here's how to fix that:

• For custom jQuery code: If you're manually binding mousewheel events, update the binding to include the passive option:

  // Before
  $(window).on('mousewheel', function(e) {
    // Your handler code
  });
  
  // After
  $(window).on('mousewheel', { passive: true }, function(e) {
    // Your handler code
  });
  

• For third-party libraries: If the issue comes from a library like ng4-geoautocomplete, check if there's an updated version that supports passive events. If not, you can use a tool like patch-package to modify the library's code directly (add the passive: true option where it binds mousewheel events).

4. Confirm Angular Material is up-to-date

You're already on Angular Material 5.2.5 (the latest for Angular 5), but double-check that any Material components using scroll events aren't the source—this version should handle passive events correctly, but combining it with the Zone.js fixes above will cover all cases.

Final Checks #

After making these changes, restart your dev server (ng serve) and test in Chrome. The warning should disappear, and your app's scroll responsiveness should feel snappier too!

内容的提问来源于stack exchange，提问作者Foram Jhaveri