Personalizando o scrollbar com WebKit

Personalizar barras de rolagem é algo que vem lá dos tempos do IE 5.5. Naquele tempo, personalizavam-se as cores da barra, criando efeitos na maioria da vezes cafonas. Já faz algum tempo que o WebKit suporta scrollbars personalizadas. Você pode personalizar atributos como borda e background, usando até mesmo imagens para criar barras de rolagens bacanas. Esse artigo mostra alguns pseudo-elementos e pseudo-classes para personalizar sua barra.

Antes de começar

Antes de começar precisamos alterar algumas propriedades de posicionamento de nossa página, para que a barra do WebKit substitua a barra nativa do browser.

body {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
}

html {
	overflow-y: auto;
	background-color: transparent;
}

Os pseudo-elementos e as pseudo-classes

Pseudo-elementos

  • -webkit-scrollbar
  • -webkit-scrollbar-button
  • -webkit-scrollbar-track
  • -webkit-scrollbar-track-piece
  • -webkit-scrollbar-thumb
  • -webkit-scrollbar-corner
  • -webkit-resizer

Pseudo-classes

  • :horizontal
  • :vertical
  • :decrement
  • :increment
  • :start
  • :end
  • :double-button
  • :single-button
  • :no-button
  • :corner-present
  • :window-inactive
  • :enabled
  • :disabled
  • :hover
  • :active

Exemplos

Exemplo 1

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

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment  {
	display: none;
}

::-webkit-scrollbar-track-piece  {
	background-color: #3b3b3b;
	-webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
	background-color: #666;
	-webkit-border-radius: 6px;
}

Veja no primeiro exemplo que nos elementos -webkit-scrollbar-button:start:decrement e -webkit-scrollbar-button:end:increment foram usadas display:none, para que não seja exibido os botões das extremidades da barra.

Exemplo 2

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
}

::-webkit-scrollbar-button:end:increment {
    background-image: url("images/scroll_cntrl_dwn.png");
}

::-webkit-scrollbar-button:start:decrement {
    background-image: url("images/scroll_cntrl_up.png");
}

::-webkit-scrollbar-track-piece:vertical:start {
    background-image: url("images/scroll_gutter_top.png"), url("images/scroll_gutter_mid.png");
    background-repeat: no-repeat, repeat-y;
}

::-webkit-scrollbar-track-piece:vertical:end {
    background-image: url("images/scroll_gutter_btm.png"), url("images/scroll_gutter_mid.png");
    background-repeat: no-repeat, repeat-y;
    background-position: bottom left, 0 0;
}

::-webkit-scrollbar-thumb:vertical {
    height: 56px;
    -webkit-border-image: url("images/scroll_thumb.png") 8 0 8 0 stretch stretch;
    border-width: 8 0 8 0;
}

No segundo exemplo, foram usados múltiplos backgrounds para criar uma barra de rolagem arrendondada.

Exemplo 3

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:end:decrement {
    display: block;
}

::-webkit-scrollbar-button:end:increment {
    background-image: url("images/scroll_cntrl_dwn.png");
}

::-webkit-scrollbar-button:end:decrement {
    background-image: url("images/scroll_cntrl_up.png");
}

::-webkit-scrollbar-track-piece:vertical:start {
    background-image: url("images/scroll_gutter_top.png"), url("images/scroll_gutter_mid.png");
    background-repeat: no-repeat, repeat-y;
}

::-webkit-scrollbar-track-piece:vertical:end {
    background-image: url("images/scroll_gutter_btm.png"), url("images/scroll_gutter_mid.png");
    background-repeat: no-repeat, repeat-y;
    background-position: bottom left, 0 0;
}

::-webkit-scrollbar-thumb:vertical {
    height: 56px;
    -webkit-border-image: url("images/scroll_thumb.png") 8 0 8 0 stretch stretch;
    border-width: 8 0 8 0;
}

Nesse exemplo são usados botões na parte inferior da barra, como no Mac OS.

Exemplo 4

pre {
	border: 1px solid #ccc;
	border-radius: 3px;
	white-space: nowrap; 
	overflow: scroll;
	padding: 5px;
	width: 550px;
}

pre::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	padding: 18px;
	-webkit-border-radius: 1ex;
}

pre::-webkit-scrollbar-thumb {
	background: #ccc -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(240, 240, 240)), to(rgb(210, 210, 210)));
	padding: 8px;
	width: 6px;
	height: 6px;
	-webkit-border-radius: 1ex;
}

pre::-webkit-scrollbar-button:start:decrement,pre::-webkit-scrollbar-button:end:increment {
	display: none;
}

pre::-webkit-scrollbar-thumb:vertical, pre::-webkit-scrollbar-thumb:horizontal {
	height: 3px;
	width: 3px;
	margin: 3px;
}

Para terminar, foi aplicado em um elemento <pre>. Todos os exemplos acima estão no meu GitHub, no repositório webkit-examples. Confira outros exemplos no site do WebKit.

Extra: detectando o WebKit

Você pode detectar se o browser do usuário usa WebKit rapidamente com Javascript:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
  	alert('hello webkit!');
}


Ver no codestacker

… e usar jQuery para carregar uma folha de estilo personalizada:

$('head').append('<link rel="stylesheet" href="safari.css" type="text/css" />');


Ver no codestacker

 

Leonardo

Registros de Leonardo Faria sobre desenvolvimento web

 
  • não funciona no IE.
    Abrcs

  • Guilherme,
    Não funciona pois esse atributo do CSS é apenas para browsers que usam o Webkit, como Chrome e Safari.

  • olá preciso saber como mudar a velocidade da barra de rolagem para usar como um infity scroll no site usando apenas ancoras..