How do I style scroll bar -- particularly in dark mode

Ask us anything
1

Hi Everyone,

I have two questions about styling scroll bars:

  1. When I add scroll to a container space for both a horizontal and vertical scroll bar are added. Is there a way to restrict scroll to only one dimension (preferably vertical)?

  2. I’ve implemented Dark Mode (which is awesome!) using the Library colors but can’t seem to find a way to style the scroll bar for dark mode only. I’ve seen a post that uses custom CSS, but am wondering how to change only for dark mode.

Thanks!

2

Hey @SteveB
You can set the scroll to auto so that the scrollbar only appears when needed.
Else, to force the display of the vertical scrollbar, you can add the custom properties overflow-y: scroll.

I think you could use a color variable from your Libraries, this way, it will use the dark mode color you set!

3

Hi both, I came across similar issue and wanted to ask for help.

I want to display the scroll bar even when the user is not scrolling.

I tried adding overflow-x:scroll in CSS but it didn’t work out. Probably it is sensitive to browser I am user (I use Chrome on mac)

Does anyone know solution?