为滚动条轨道添加不透明度

Question

有没有办法为滚动条轨道添加不透明度？

当我添加关键字opacity:0.5 时，它似乎什么也没做...... 我使用了material ui styled，但我认为这与它无关。

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,
    },
}));

因为我使用样式化组件，内置主题我希望主题在我将其更改为暗模式时保持一致。

所以我的问题是，是否有办法在不使用关键字 opacity 的情况下将 opcaity 添加到 theme.palette.primary.main。

Answer 1

下面的样式将作为 css 工作，您必须转换为样式组件。

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

在屏幕截图中，您可以看到蓝色是滚动拇指，轨道是透明的。

注意：您可以覆盖 Chrome 和 Safari 的滚动条属性，但我还没有看到它在 Firefox 中有效。