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á:
Gostaria que o body ocupasse toda a extensão da janela, ocupando o inclusive o espaço da track para ficar assim:
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: