Add scroll class when scrolling

[Acccent]

Hi and first of all thanks for the amazing library, I've been using v1 for yeaaars and am now upgrading my website and moving to v2!

Is your feature request related to a problem? Please describe. In v1, the scrollbar ontainer element would get a special class added to it whenever it was being scrolled. This made it easy to style the scrollbar to be more visible during scrolling. Unless I'm missing something, there is no easy way to do this with v2?

Describe the solution you'd like When the user scrolls, the scrollbar or parent element gets a special class like os-scrollbar-scrolling. When scrolling stops, the class is removed.

Describe alternatives you've considered I'm using a workaround of setting autoHide: scoll and then styling the supposedly hidden scrollbars to not be actually hidden, but it's not optimal. And you can't have scrollbars that are especially visible when scrolling, and auto-hide after a delay when no scrolling happens.

Additional context I tried to look at the code to see if I could submit a PR and it's above my head but I feel like the mechanisms are mostly in place for the autoHide: scroll functionality I mentioned above...?

[Acccent]

Ideally there would also be separate custom properties for the scrolling state in the CSS, like:

--os-track-bg-scrolling: #999;
--os-handle-bg-scrolling: #ccc;

[KingSora]

Good day @Acccent :)

In v1 this behavior was the default behavior, but there were complaints about a performance impact because of that, so I removed it in v2.

Currently I'm finalizing the Plugin API and would offer you an Plugin which adds this kind of functionality. The only thing you would need to do is to use the plugin, something like:

OverlayScrollbars.plugin(ScrollingClassNamePlugin);

[Acccent]

Sounds good, thanks!

[KingSora]

@Acccent alright! This plugin should work:

const osScrollingClassNamePlugin = {
  'scrollingClassNamePlugin': {
    instance: (instance, event) => {
      let scrollTimeoutId: number | undefined;
      const scrollingClassName = 'scrolling';
      const timeoutMs = 150;
      const { 
        scrollbarHorizontal: { scrollbar: scrollbarX }, 
        scrollbarVertical: { scrollbar: scrollbarY } 
      } = instance.elements();

      event('scroll', () => {
        scrollbarX.classList.add(scrollingClassName);
        scrollbarY.classList.add(scrollingClassName);
        clearTimeout(scrollTimeoutId);
        scrollTimeoutId = setTimeout(() => {
          scrollbarX.classList.remove(scrollingClassName);
          scrollbarY.classList.remove(scrollingClassName);
        }, timeoutMs);
      })

      event('destroyed', () => clearTimeout(scrollTimeoutId));
    },
  }
} satisfies InstancePlugin;

OverlayScrollbars.plugin(osScrollingClassNamePlugin);

Please use the newest version v2.4.2 for it. I've also created a small example here: https://stackblitz.com/edit/overlayscrollbars-react-x2exwf?file=src%2Fmain.tsx

You can connect the plugin with css custom properties yourself, the plugin is just here to add the classname.