Modificando a Barra de Rolagem do Seu Site


Ter um site com um layout moderno e diferenciado faz uma grande diferença para quem está visitando o seu site. Então hoje irei disponibilizar para vocês um código que pode ser adicionado na head do seu site e deixará a sua barra de rolagem personalizada.

Confira o código abaixo:

[sociallocker id=”1173″]

<style> ::-webkit-scrollbar {
 width: 10px;
 height: 10px;
 -webkit-border-radius: 16px;
}
 
::-webkit-scrollbar-track-piece {
 background-color: #fff;
}
 
::-webkit-scrollbar-thumb:vertical {
 height: 5px;
 background-color: #d22016;
 -webkit-border-radius: 3px;
}
 
::-webkit-scrollbar-thumb:horizontal {
 width: 5px;
 background-color: #d22016;
 -webkit-border-radius: 3px;
}
 
</style>

Observando atentamente o código vemos que na linha 8, substituindo o código da cor hexadecimal alteramos a cor do fundo da barra de rolagem.

Se alterarmos as cores das linhas 13 e 19, modificamos a cor da barra de rolagem.

É um código bem simples e fácil de trabalhar, mas caso haja dúvida é só entrar em contato.
[/sociallocker]

Anterior Como Publicar Um Site Localmente Com Web Acappella
Próximo Publicando Site No Web Acappella 5 - WARC

1 Comentário

  1. Deivid Lucas
    04/12/2017
    Responder

    Muito top

Deixe Uma Resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *