Closed Acccent closed 11 months ago
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;
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);
Sounds good, thanks!
@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.
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...?