zefoy / ngx-perfect-scrollbar

Angular wrapper library for the Perfect Scrollbar
MIT License
521 stars 116 forks source link

Chrome violation warnings for scroll events - Add passive listener option #269

Open manoj-raut opened 4 years ago

manoj-raut commented 4 years ago

Please add passive event listeners to improve scroll performance.

In Chrome browser it gives below verbose warnings.

[Violation] Handling of 'wheel' input event was delayed for 217 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive. scrollableElement.ts:257

[Violation] Handling of 'wheel' input event was delayed for 218 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive.

See - https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners?utm_source=lighthouse&utm_medium=cli

chrome mouse events warning

sconix commented 4 years ago

This is just a wrapper, this kind of requests need to go for the perfect-scrollbar.

Splaktar commented 3 years ago

In one issue from 2016, perfect-scrollbar said that they won't add support for passive events.

The same contributor made some more comments in 2017.

There was a PR that tries to add passive: false to the library, but it doesn't have any browser feature detection.

And finally, in May 2020, a PR for this was posted, with browser feature detection, and has been reviewed, but not yet merged: https://github.com/mdbootstrap/perfect-scrollbar/pull/945

Splaktar commented 3 years ago

FYI this also needs to be fixed in this library: https://github.com/zefoy/ngx-perfect-scrollbar/blob/f056dd7f62f909ddfc2629c971eebf8e1b7ed302/projects/lib/src/lib/perfect-scrollbar.component.ts#L166 https://github.com/zefoy/ngx-perfect-scrollbar/blob/f056dd7f62f909ddfc2629c971eebf8e1b7ed302/projects/lib/src/lib/perfect-scrollbar.component.ts#L179

Both of these need to pass {passive: false} as a third parameter to fromEvent() since checkPropagation() can call preventDefault().