Custom scrollbars

[OfirValla]

Hello,
How can i create a stylex variable for the following css

::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

[nmn]

Please be a bit clearer.

[OfirValla]

Hi @nmn,

Im trying to create a stylex variable that will edit the scrollbar and the scrollbar thumb.
Something like this:

stylex.create({
    root: {
        '::-webkit-scrollbar': {
            width: '20px'
        },
        '::-webkit-scrollbar-thumb': {
            backgroundColor: '#d6dee1',
            borderRadius: '20px',
            border: '6px solid transparent',
            backgroundClip: 'content-box',
            ':hover': {
                backgroundColor: '#a8bbbf'
            }
        }
    }
});

Is it even possible to achieve it, or will I have to use a .css file?

[nmn]

This is possible but a bit of an edge-case.

In general what you've written down should "just work". This is the way you're supposed to handle the pseudo-elements with StyleX.

The only question I have is with the :hover being used. It's likely that you want the :hover.
The correct way to handle that would be:

stylex.create({
    root: {
        '::-webkit-scrollbar': {
            width: '20px'
        },
        '::-webkit-scrollbar-thumb': {
            backgroundColor: {
              default: '#d6dee1',
              ':hover': '#a8bbbf',
            },
            borderRadius: '20px',
            border: '6px solid transparent',
            backgroundClip: 'content-box',
        }
    }
});

It's also possible that you want to detect hover on the scrollable root and not the scrollbar-thumb. If that is the case, you would need to use ':hover::-webkit-scrollbar-thumb' as a separate key.