Adjust size on hover/drag

[gczh]

Is your feature request related to a problem? Please describe. Not related to any problems, but more of an improvement over customizing scrollbar behavior.

Describe the solution you'd like

• When hovering/selecting the scrollbar, its size could be adjusted
• Similar to how Radix Scroll Area works, except that we're using pure javascript with OverlayScrollbars library.

Describe alternatives you've considered It seems that I could write some event listeners to listen to mousedown, mouseup, events and then setting the size accordingly. But, might there be a simpler way with the library? Or could this be a useful functionality built into the library itself?

Additional context

https://github.com/user-attachments/assets/227e7f2d-a085-4de8-944f-45fbc9766948

[KingSora]

@gczh currently the scrollbar-handle has a little offset added to its width / height to make it easier to move it (mostly for touch devices).

For the default themes this offset is controlled by the --os-handle-interactive-area-offset css property. When you set this offset to 0 the additional "thickness" should disappear.

[gczh]

@gczh currently the scrollbar-handle has a little offset added to its width / height to make it easier to move it (mostly for touch devices).

For the default themes this offset is controlled by the --os-handle-interactive-area-offset css property. When you set this offset to 0 the additional "thickness" should disappear.

Ahh got it! I'm trying to make it bigger though, is that possible? It should grow in size when it's selected / dragged / hovered on.

Edit: got it to work with these:

--os-handle-perpendicular-size-hover: 200%;
 --os-handle-perpendicular-size-active: 200%;

@KingSora love the work you're doing with this library. I'm glad I don't have to use react for this! 🙏

[gczh]

Running into a slight issue here:

https://github.com/user-attachments/assets/abb54022-e77f-4852-9fe9-0bda1e622ebe

I can't seem to find the settings to get the background to be of the same size as the --os-handle-perpendicular-size-active/hover when it's hovered/dragged.

Here's what I have:

.os-theme-dark {
  --os-size: 8px;
  --os-handle-perpendicular-size-hover: 200%;
  --os-handle-perpendicular-size-active: 200%;
  --os-track-bg-hover: #e5e7eb;
  --os-track-bg-active: #e5e7eb;
  --os-handle-bg: #9ca3af;
  --os-handle-bg-hover: #9ca3af;
  --os-handle-bg-active: #9ca3af;
}