Unable to preventDefault inside passive event listener due to target being treated as passive

[alastairkitchen]

i'm getting the following error when i drag the scrollbar when using a device with touch controls

"Unable to preventDefault inside passive event listener due to target being treated as passive"

To get the error I was using google chromes device emulation (emulating an ipad). Dragging the scrollbar within the element is fine however if i use the scrollbar then drag the error appears (i've highlighted this in red in the screen shot)

this is the source of the error that is being thrown in devtools

I tried to replicate this error using your sandbox but could not get the same error unfortunately

[nch3ng]

I'm having the same issue. too

[bri1990]

is there a temporary solution for this? It seems to happen only in chrome after a touch event

[hanyska]

same

[bogdandynamic]

same problem here. is there any workaround or a solution?

[bogdandynamic]

found a solution to the problem. if you use npm (using latest version of perfect scrollbar), goto node_modules/perfect-scrollbar/dist and modify

• perfect-scrollbar.common.js function function mouseMoveHandler(e) (line 564) as follows:

  e.stopPropagation();
  if (!e.passive)  // ADD THIS
  e.preventDefault();

• perfect-scrollbar.esm.js function mouseMoveHandler(e) (line 561) as follows:

  e.stopPropagation();
  if (!e.passive)  // ADD THIS
  e.preventDefault();

• perfect-scrollbar.js function mouseMoveHandler(e) (line 568) as follows:

  e.stopPropagation();
  if (!e.passive)  // ADD THIS
  e.preventDefault();

If you work with the source code, goto node_modules/perfect-scrollbar/src/handlers and edit mouse-wheel.js, function function mousewheelHandler(e) (line 149) as follows:

if (shouldPrevent && !e.ctrlKey) {
  e.stopPropagation();
  if (!e.passive)  // ADD THIS
    e.preventDefault();
}

Hope it helps.

[cakeinpanic]

same problem when using with angular and unpatching wheel event with zone-flags Solution from @bogdandynamic seems good