Ajuda com Scrollbar personalizado

Olá pessoal, então venho tentando deixar minha barra de rolagem do site mais bonita e que não interferisse na largura do mesmo.
Depois de bater bastante a cabeça (sou novo nesse trem de CSS), consegui deixar quase do jeito que eu quero. Barra personalizada, que fique por cima do layout e sem fundo da barra.

Meu código ficou assim:
body {

overflow: overlay;
outline: none;
display: block;
}

::-webkit-scrollbar {
width: 6px;
height: 6px;
-webkit-border-radius: 4px;
}

::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(0, 0, 0, .5);
-webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
width: 5px;
background-color: rgba(0, 0, 0, .5);
-webkit-border-radius: 3px;
}

Não sei se está errado, só sei que pra mim ficou perfeito, só falta uma coisa, eu gostaria que essa barra de rolagem ficasse totalmente transparente e quando eu passasse o mouse perto dela ou rolasse o scroll automaticamente essa barra voltasse a aparecer como ela já fica com o atual código.
Alguém poderia me ajudar? bati um pouco a cabeça nisso também, mas sinto que estou esquecendo de adicionar algo que identifica isso.

Caso alguém queira ver de onde estou tirando referencia, é desse site aqui: https://www.pearlabyss.com/en-US/
Estou tentando fazer algo igual no meu site. Muito obrigado desde já!