Ajuda com Scrollbar personalizado

27/02/2021

7

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á!
Responder

Post mais votado

27/02/2021

Olá, Lucas!

Toda vez que vc desejar esconder algum elemento, é só adicionar o "display:none" em sua tag declaratória no .css;
para exibi-lo qdo o mouse passar sobre ele, é só fazer "elemento:hover{ display: block;}";

Tipo assim:

// Para esconder o scrollbar
::-webkit-scrollbar-track {
display: none;
}


// Para exibir o scrollbar qdo o mouse passar sobre
::-webkit-scrollbar-track:hover {
display: block;
}

//Para esconder o elemento trumb
::-webkit-scrollbar-thumb {
display:none;
}

//Para exibir o elemento trumb qdo o mouse passar sobre ele
::-webkit-scrollbar-thumb:hover {
display:block;
}
Responder

Mais Posts

28/02/2021

Lucas

Olá, Lucas!

Toda vez que vc desejar esconder algum elemento, é só adicionar o "display:none" em sua tag declaratória no .css;
para exibi-lo qdo o mouse passar sobre ele, é só fazer "elemento:hover{ display: block;}";

Tipo assim:

// Para esconder o scrollbar
::-webkit-scrollbar-track {
display: none;
}


// Para exibir o scrollbar qdo o mouse passar sobre
::-webkit-scrollbar-track:hover {
display: block;
}

//Para esconder o elemento trumb
::-webkit-scrollbar-thumb {
display:none;
}

//Para exibir o elemento trumb qdo o mouse passar sobre ele
::-webkit-scrollbar-thumb:hover {
display:block;
}


Olá, muito obrigado, parece bem simples, mas por algum motivo, não funcionou para mim. Fiz de varias formas e nenhuma foi, por fim deixei o meu código assim, tem algo errado nele?

body {

overflow: overlay;
}
::-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;
}

// Para esconder o scrollbar
::-webkit-scrollbar-track {
display: none;
}


// Para exibir o scrollbar qdo o mouse passar sobre
::-webkit-scrollbar-track:hover {
display: block;
}

//Para esconder o elemento trumb
::-webkit-scrollbar-thumb {
display:none;
}

//Para exibir o elemento trumb qdo o mouse passar sobre ele
::-webkit-scrollbar-thumb:hover {
display:block;
}
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar