Scrollbar Style

Gerador de estilo para personalizar a barra de rolagem de seus projetos. Você só selecionar as cores e larguras, e copiar o CSS.

Ferramentas

Trilha

bg:
bgHover:
bgActive:
Size:
Curve:
Border:

Botão

bg:
bgHover:
bgActive:
Size:
Curve:
Border:

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies.

Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies.

CSS

::-webkit-scrollbar {
 width: px;
 height: px;
}
::-webkit-scrollbar-button {
 width: px;
 height: px;
}
::-webkit-scrollbar-thumb {
 background: ;
 border: ;
 border-radius: px;
}
::-webkit-scrollbar-thumb:hover {
 background: ;
}
::-webkit-scrollbar-thumb:active {
 background: ;
}
::-webkit-scrollbar-track {
 background: ;
 border: ;
 border-radius: px;
}
::-webkit-scrollbar-track:hover {
 background: ;
}
::-webkit-scrollbar-track:active {
 background: ;
}
::-webkit-scrollbar-corner {
 background: transparent;
}
 .preview::-webkit-scrollbar { width: px; height: px; } .preview::-webkit-scrollbar-button { width: px; height: px; } .preview::-webkit-scrollbar-thumb { background: ; border: ; border-radius: px; } .preview::-webkit-scrollbar-thumb:hover { background: ; } .preview::-webkit-scrollbar-thumb:active { background: ; } .preview::-webkit-scrollbar-track { background: ; border: ; border-radius: px; } .preview::-webkit-scrollbar-track:hover { background: ; } .preview::-webkit-scrollbar-track:active { background: ; } .preview::-webkit-scrollbar-corner { background: transparent; }

O que é Barra de Rolagem?

Uma barra de rolagem é uma barra que aparece na lateral ou na parte inferior de uma janela para controlar qual parte de uma lista ou documento está atualmente no quadro da janela.

A barra de rolagem facilita a movimentação para qualquer parte de uma página da web. Normalmente as cores de uma barra de rolagem são definidas pelas cores padrão da janela.

Por que criar um estilo?

Em alguns casos, fica elegante modificar as características da barra de rolagem para reforçar ainda mais a identidade do seu site.

Como criar meu estilo?

Agora podemos alterar isso usando este gerador de barra de rolagem.. Siga os passos abaixo:

  1. Modifique as opções de cores da Trilha e Botão;
  2. Modifique as opções de curvas da Trilha e Botão;
  3. Modifique as opções de bordas da Trilha e Botão;
  4. Visualize o resultado em Preview;
  5. Copie o CSS na área usando o botão 'Copiar' ou 'Baixar';