Option to disable os-host-scrolling class for better performance

[tomas-c]

Is your feature request related to a problem? Please describe.

It seems that OverlayScrollbars adding/removing the "os-host-scrolling" class can trigger expensive style recalculations in Chrome. In my chat app this recalculation can last 10-400ms (based on the number of DOM elements) and can make scrolling jittery, especially when using a mouse wheel.

When I remove the code that adds/removes this class I can see a substantial improvement.

Describe the solution you'd like

The CSS files don't reference this class anywhere, I suspect most people don't need this feature.

Would you accept a PR that adds an option to disable the adding and removal of the "os-host-scrolling" class in V1?

Would consider making this disabled by default in V2?

Describe alternatives you've considered

Adding transformZ(0) on the os-viewport element makes the scrolling smoother but the style recalculations still take the same time.

SimpleBar does not add/remove any classes when scrolling so doesn't have this issue.

Additional context Add any other context or screenshots about the feature request here.

With os-host-scolling disabled the longest task takes 10ms:

With os-host-scrolling class enabled "Recalculate Styles" is triggered and takes 100ms:

[KingSora]

@tomas-c Good day!

Thanks for the suggestion.. this looks like a reasonable feature to add. Since I'm planning to re-strucutre v2, this would be definitely part of that.

This class was meant to be an easy "entry point" for custom themes, I didn't know chrome would trigger expensive re-calculations on an empty class. For v1 I'm not quite sure how to add this in an elegant way yet.. (if possible without a new option, but I guess we can't get around that)

[tomas-c]

I think our options are:

Check custom styling via os-host-scrolling exists and disable the feature if it doesn't

Would avoid adding an extra option but I don't think this can be done in a reliable way unless you have a mutation observer on the whole document and search for that class on every mutation by iterating document.styleSheets

Make this feature opt-in via an option

I suspect if anyone (probably only very few) has a custom scrollbar styles on os-host-scrolling, it's nothing critical and breaking this feature would still leave the scrollbar looking great and in a usable state. Plus this would bring performance improvements for everyone using the new version.

Make this feature opt-out via an option

This would be fully backwards compatible.

As for option names, how about:

• scrollingClassName with default 'os-host-scrolling' or '' (depending whether we make it opt-out or opt-in)
• scrollingClass with default true or false (depending whether we make it opt-out or opt-in)

[KingSora]

v2 released today which doesn't include this class at all anymore.