ListBox.Option : make the scrollbar always visible

[Cebri63]

Everything is in the title ! 😅

When using ListBox.Option, I'm looking to make the scrollbar always visible. There is an overflow: scroll on the ul, but the scrollbar only appears at focus.

If you have an idea, I'm interested !

[Cebri63]

Adding overflow-y: visible doesn't change anything
I've tested all the overflow possible options 😄

[LaurelineP]

I can back up the attempts on enforcing the scroll bar visibility using overflow properties and those are not working

[RobinMalfait]

Hey, thank you for your question! 🙏

Headless UI is headless and doesn't come with any styles. You should be able to style it however you want.

Here is an example CodeSandbox that always shows the scrollbar using overflow-y-scroll: https://codesandbox.io/s/keen-ride-79ehyf?file=/src/App.js

Now there is something you have to keep in mind, and this also depends on the OS settings itself. For example on macOS the default setting is that the scrollbars sit on top and are not part of the scrollable area itself.

In this scenario, you won't see the "forced" scrollbar.

[LaurelineP]

Hi there, already did this approach.
I've personally checked the overflow properties and pseudo element for the scrollbar already - none are working to enable the
By not working: we probably mean yes the overflow does work however we would have imagine to display the scrollbar track (ref: ::-webkit-scrollbar-track pseudo class` all the time without receiving any mouse events.

Like a custom component build from scratch using div: to create the scroll box handler - instead of using the default browser scroll.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#result

I've check the code sandbox - like mentioned above the scrolling ability issue is not involved here but it is more about the ability to always display a scroll bar tail.

Note the appearance is different based on the OS.
Here the scrollbar will disappear if the mouse don't move.