8

Estilizei a scrollbar do meu site para webkit, e coloquei o background da track como transparent, porém eu gostaria que a thumb se sobreposse ao conteúdo do body, simulando um efeito de position absolute, e o body 100% sem deixar o padding para a track, como posso fazer isso? Exemplo de como está:

inserir a descrição da imagem aqui

Gostaria que o body ocupasse toda a extensão da janela, ocupando o inclusive o espaço da track para ficar assim:

inserir a descrição da imagem aqui

Apesar do código que o Marcos Henzel ter funcionado bem aqui, por algum motivo não funcionou no site, então fiz um "hackzinho" pra poder conseguir o efeito que eu queria e o código ficou da seguinte forma:

body{
    width:100%;
    height:100%;
    position:absolute;
    overflow-y:scroll;
    background-color:#312d28;   
    font-family:'Ebrima';
    margin:10px;
    top:-10px;
    left:-10px;
    padding-right:14px;
} 
body::-webkit-scrollbar {
     width: 14px;
}
body::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.7);
}
body::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
body::-webkit-scrollbar-corner {
    background-color: transparent;
}

Dessa forma consigo com que o efeito fiquei exatamente igual ao da imagem de exemplo. Aplicando um margin ao body e depois puxando-o de volta com as propriedades left e top e então coloco um padding-right para puxar o body no espaço que a scrollbar ocupa. Imagem abaixo:

inserir a descrição da imagem aqui

9
  • Acho que só colocar a cor de fundo da barra transparent, não parece que está. Tem o site no ar ou um fiddle ? Commented 15/12/2016 às 13:22
  • a track já está com o background transparente
    – Leo Letto
    Commented 15/12/2016 às 13:52
  • Posta o código... Commented 15/12/2016 às 13:53
  • O site ta assim atualmente: bluanime.com/v2/navegar
    – Leo Letto
    Commented 15/12/2016 às 13:54
  • 2
    Não altere a pergunta com solução, você pode postar sua versão finalizada como resposta, e manter a que resolveu como aceita.
    – Largato
    Commented 19/12/2016 às 21:13

1 Resposta 1

4
+50

Para navegadores webkit (Chrome, Safari, Opera 15+):

    ::-webkit-scrollbar              { /* 1 */ }
    ::-webkit-scrollbar-button       { /* 2 */ }
    ::-webkit-scrollbar-track        { /* 3 */ }
    ::-webkit-scrollbar-track-piece  { /* 4 */ }
    ::-webkit-scrollbar-thumb        { /* 5 */ }
    ::-webkit-scrollbar-corner       { /* 6 */ }
    ::-webkit-resizer                { /* 7 */ }

Para criar um scrollbar exatamente como da tua pergunta seria algo deste genero:

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

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

    ::webkit-scrollbar-thumb {
        background: #dad7d7;
     }

Conforme o snippet, abra no Navegador Chrome ...

.container {
    height:200px;
    overflow: auto;
    width: 200px;
    border-bottom: 1px solid #D4D4D4;
    background-color: blue;
}

.container::-webkit-scrollbar-track {
    background-color: transparent;
}
.container::-webkit-scrollbar {
    width: 10px;
}
.container::-webkit-scrollbar-thumb {
    background: #dad7d7;
}
<div class="container">
    <div class="content" style="height:600px;">fdsf</div>
</div>

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .