0

Is there a way to add opacity to scrollbar track?

When I add the keyword opacity:0.5 it seems to not do anything... I used material ui styled, but I dont think it has anything to do with it.

const Root = styled('div')(({ theme }) => ({
    display: 'flex',
    overflow: 'auto',
    maxHeight: '750px',
    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
        width: '12px',
    },
    '&::-webkit-scrollbar-track': {
        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
        borderRadius: '10px',
        opacity: '0.5', // --> this is not apply.
        backgroundColor: theme.palette.primary.main,
    },
    '&::-webkit-scrollbar-thumb': {
        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
        borderRadius: '10px',
        backgroundColor: theme.palette.primary.main,
    },
}));

and because I use styled component, built in theme I want the theme to be consistent when I change it to darkmode.

so my question is if there is a way to add opcaity to the theme.palette.primary.main without the keyword opacity.

Meyer Buaharon
  • 425
  • 5
  • 15

1 Answers1

0

The styling below will work as css, you will have to convert for styled component.

::-webkit-scrollbar { width:12px; } ::-webkit-scrollbar-track { background: transparent !important; width: 12px; } ::-webkit-scrollbar-thumb { border-radius: 2px; background: #0074AD; }

In the screen shot you can see the blue is the scroll thumb, and the track is transparent.

Screenshot of scrollbar

Note: You can override scrollbar properties for Chrome and Safari but I have yet to see it work in Firefox.

Authentic Science
  • 838
  • 1
  • 3
  • 5