Add {passive: true} to addEventListener

mdbootstrap / perfect-scrollbar

Minimalistic but perfect custom scrollbar plugin. Get more free components with Material Design for Bootstrap UI Kit (link below)

https://perfectscrollbar.com/

MIT License

352 stars 69 forks source link

Add {passive: true} to addEventListener #30

Open nicraMarcin opened 4 years ago

nicraMarcin commented 4 years ago

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 commented 4 years ago

Agree with this solution, +1

NonieBenks commented 4 years ago

Also agree.

matiyin commented 4 years ago

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 commented 4 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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?