custom scrollbar prevents scroll by dragging

[trueight]

Describe the bug

2024-10-28.16-07-11.mp4

Reproduction

open https://next.shadcn-svelte.com/blocks#sidebar-01

try to scroll sidebar dragging scrollbar

Logs

No response

System Info

.

Severity

annoyance

[huntabyte]

We should probably just get rid of the custom scrollbars on the docs tbh

[trueight]

We should probably just get rid of the custom scrollbars on the docs tbh

I like them! I think the custom ones are much prettier than the standard ones, I understand if they need to be removed because they're hard to maintain, but I'll probably keep using them in my projects

[huntabyte]

Yeah but in cases like you show there, they degrade the UX lol

[trueight]

@huntabyte would it be possible to make the sidebar trigger hoverable only when the mouse is outside the sidebar? that way, when the mouse is inside, it would respond to scrolling and other interactions as expected

the red border is the sidebar, and the green border is the toggle. moving the toggle outside the sidebar or making it non-interactive when the mouse is inside the sidebar should solve the issue.

[LaneSun]

You can add the following code to your global CSS to get a nice enough scrollbar.

* {
  scrollbar-color: hsl(var(--border) / 0.5) transparent;
}

*:hover {
  scrollbar-color: hsl(var(--border) / 1) transparent;
}

By the way, I'm in favor of keeping the custom scrollbar because even with the native scrollbar, the actual dragging area is obscured and is actually quite narrow, so I don't think it's a problem with the custom scrollbar, and as discussed above, the design of the Sidebar should be tweaked.