Add {passive: true} to addEventListener

[nicraMarcin]

Using perfect-scrollbar in chrome produces a lot of Violation issues

zone-evergreen.js:1773 [Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

adding {passive: true} should resolve this issue

bind(eventName, handler) {
    if (typeof this.handlers[eventName] === 'undefined') {
      this.handlers[eventName] = [];
    }
    this.handlers[eventName].push(handler);
    this.element.addEventListener(eventName, handler, {passive: true});
  }

  unbind(eventName, target) {
    this.handlers[eventName] = this.handlers[eventName].filter(handler => {
      if (target && handler !== target) {
        return true;
      }
      this.element.removeEventListener(eventName, handler, {passive: true});
      return false;
    });
  }

[redrbrt]

Agree with this solution, +1

[NonieBenks]

Also agree.

[matiyin]

I have the same issue in Chrome latest, breaking my mobile version (scroll doesn't work at all), but I see it's being worked on. Thanks a lot!

[pwang2]

@matiyin I also noticed the performance penalty on mobile. But for mobile, there should be no need for polyfil like this.. instead I use a conditional component when detect it is touchable device.

https://gist.github.com/f716316b81d50c84cc12fd35f0278342

[andrei-gheorghiu]

This has already been PR-ed: https://github.com/mdbootstrap/perfect-scrollbar/pull/945

Apart from your proposed fix, it also uses feature detection, so it continues to work as intended on older browser versions, without support for the new syntax. Details here.

[Splaktar]

Also of note is that https://github.com/mdbootstrap/perfect-scrollbar/issues/873 had been open for a while asking for an option to set the listeners' passive value.

[hmoffatt]

According to https://caniuse.com/mdn-api_eventtarget_addeventlistener_options support for the options/boolean is pretty widespread - implementing the options feature detection doesn't seem too important?

[sinasita]

You can add via CSS

touch-action: none;

to your scrolling container. That helped me to get rid of the error