Performance when scrolling

[artsx]

Hello,

I installed your module and all I can do what I want, the only problem is that when I scroll is jerky, I have not a linear scroll as in the demo.

I have this error appears: Handling of 'wheel' input event was delayed for 110 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

There is there a solution?

Best regards,

[DonovanCharpin]

Hi @artsx, same on my side, the plugin does everything that I need but I can't use it because it's not smooth at all, even laggy when I scroll. It's maybe because of the content, I don't really know.

[souhe]

Hi @artsx @DonovanCharpin :) Can you try to install react-scrollbar from this github branch: https://github.com/FranzPoize/reactScrollbar? There is a fix that could fix performance issues so I would like to know if it works on real example.

[ryanmcclure4]

I'm experiencing this performance issue as well, @artsx @DonovanCharpin were either of you able to get this to work? I'm unable to install from the other branch.

[DonovanCharpin]

Hi @souhe, I'm not able to test it now, I'll test it later and will tell you :)

[kbytin]

@souhe tried reactScrollbar from this branch and now my console is full of warning.js:35 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method stopPropagationon a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information. printWarning @ warning.js:35 warning @ warning.js:59 warn @ SyntheticEvent.js:263 get @ SyntheticEvent.js:257 (anonymous) @ ScrollArea.jsx:267 Promise resolved (async) handleWheel @ ScrollArea.jsx:262 ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69 executeDispatch @ EventPluginUtils.js:85 executeDispatchesInOrder @ EventPluginUtils.js:108 executeDispatchesAndRelease @ EventPluginHub.js:43 executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54 forEachAccumulated @ forEachAccumulated.js:24 processEventQueue @ EventPluginHub.js:254 runEventQueueInBatch @ ReactEventEmitterMixin.js:17 handleTopLevel @ ReactEventEmitterMixin.js:27 handleTopLevelImpl @ ReactEventListener.js:72 perform @ Transaction.js:143 batchedUpdates @ ReactDefaultBatchingStrategy.js:62 batchedUpdates @ ReactUpdates.js:97 dispatchEvent @ ReactEventListener.js:147

can we fight this jerky behavior somehow?

[pavlokitdev]

Every scroll (even for 1px) cause re-render of all children components. I'm trying to use reactScrollbar for large table >200 rows with 12 columns in each (each column - separate react-component) and It gives me a lot of performance issues :(