Nenhuma avalição
COMENTAR
INDICAR
Barra de rolagem personalizadaPostada em: 09/09/2004
Veremos como deixar a barra de rolagem (scrollbar) colorida. Como esta folha de estilos é simples, veremos também uma aplicação de CSS + Javascript, onde teremos uma barra de rolagem que muda de cor quando o mouse passa por cima (onMouseover).
Barra de Rolagem colorida
O código para que a barra de rolagem fique colorida deve ser incluído na tag body, no seu documento html ou num arquivo css, como no exemplo:
body {
scrollbar-arrow-color: #666666;
scrollbar-base-color: #666666;
scrollbar-dark-shadow-color: #666666;
scrollbar-track-color: #666666;
scrollbar-face-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-3d-light-color: #666666;
}
No código acima, todos os atributos da barra de rolagem estão na cor chumbo; você pode modificar para a cor que desejar. Na imagem abaixo você pode ver cada atributo da barra de rolagem e assim modificar as cores corretamente:
Você pode colocar o código direto na página, como no exemplo, ou incluir dentro de um arquivo externo. Lembrando que um arquivo externo é sempre melhor, pois pode ser reutilizado.
Barra de Rolagem (CSS+Javascript)
A diferença desta barra de rolagem para a mostrada acima é que ao passar o mouse sobre a scrollbar ela muda de cor. Você deve colocar o código abaixo dentro da tag do seu documento html para seu funcionamento.
O código javascript está comentado para você entender como funciona e onde alterar as cores. ;)
Abra o notepad e digite o código abaixo. Salve como barraderolagem2.html
function scrollBar(line, face, theme) {
//Se as variáveis line e face tiverem valor igual null, aparecerá o tema. - Não modifique estas linhas.
if (!line || !face) {
line = null;
face = null;
switch(theme) {
//tema azul - aqui você coloca as cores da scrollbar no tema azul
case "azul":
var line="#3366CC"; //coloque a cor da variavel line
var face="#AABFEA"; //coloque a cor a variavel face
break;
//tema amarelo - aqui você coloca as cores da scrollbar no tema amarelo
case "amarelo":
var line="#FFCC00"; //coloque a cor da variavel line
var face="#FFFF99"; //coloque a cor da variavel face
break;
}
}
//integração da folha de estilos no javascript
swith(document.body.style) {
//no tema você deu o valor das variáveis line e face. Abaixo você vê onde cada cor vai ficar.
scrollbarDarkShadowColor = line;
scrollbar3dLightColor = line;
scrollbarArrowColor="#666666"; //aqui é a cor da setinha, dependendo da cor que você escolher para line e face, é melhor trocar a cor preta pela cor branca
scrollbarBaseColor = face;
scrollbarFaceColor = face;
scrollbarHighlightColor = face;
scrollbarShadowColor = face;
scrollbarTrackColor = face;
}
}
// Inicio da função colorBar
function colorBar(){
var w = document.body.clientWidth; //variavel w, captura a largura da janela (navegador)
var h = document.body.clientHeight; //variavel h, captura a altura da janela (navegador)
var x = event.clientX;
var y = event.clientY;
//Abaixo você deve colocar as cores que devem aparecer quando o mouse passar por cima da scrollbar.
if (x > w) {
scrollBar('#FFCC66','#FFFFCC'); //coloque cores diferentes do tema, senão o efeito não será visto.
} else {
scrollBar(null, null, "amarelo"); //Aqui você deve colocar o nome do tema escolhido, no código eu tenho tema azul e tema amarelo, eu escolhi que a scrollbar tenha as cores do tema amarelo.
}
if (document.all) {
//Coloque novamente o tema escolhido. Deixe as outras duas opções do jeito que estão, com valores NULL.
scrollBar(null, null, "amarelo");
document.onmousemove = colorBar;
}
Dica: Se o fundo do seu site for branco ou uma outra cor clara, coloque uma cor escura em line e uma cor clara em face. Se o fundo do seu site for escuro, faça o contrário, coloque uma cor clara em line e uma cor escura em face.
Barra de Rolagem colorida
O código para que a barra de rolagem fique colorida deve ser incluído na tag body, no seu documento html ou num arquivo css, como no exemplo:
body {
scrollbar-arrow-color: #666666;
scrollbar-base-color: #666666;
scrollbar-dark-shadow-color: #666666;
scrollbar-track-color: #666666;
scrollbar-face-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-3d-light-color: #666666;
}
No código acima, todos os atributos da barra de rolagem estão na cor chumbo; você pode modificar para a cor que desejar. Na imagem abaixo você pode ver cada atributo da barra de rolagem e assim modificar as cores corretamente:
Você pode colocar o código direto na página, como no exemplo, ou incluir dentro de um arquivo externo. Lembrando que um arquivo externo é sempre melhor, pois pode ser reutilizado.
Barra de Rolagem (CSS+Javascript)
A diferença desta barra de rolagem para a mostrada acima é que ao passar o mouse sobre a scrollbar ela muda de cor. Você deve colocar o código abaixo dentro da tag do seu documento html para seu funcionamento.
O código javascript está comentado para você entender como funciona e onde alterar as cores. ;)
Abra o notepad e digite o código abaixo. Salve como barraderolagem2.html
function scrollBar(line, face, theme) {
//Se as variáveis line e face tiverem valor igual null, aparecerá o tema. - Não modifique estas linhas.
if (!line || !face) {
line = null;
face = null;
switch(theme) {
//tema azul - aqui você coloca as cores da scrollbar no tema azul
case "azul":
var line="#3366CC"; //coloque a cor da variavel line
var face="#AABFEA"; //coloque a cor a variavel face
break;
//tema amarelo - aqui você coloca as cores da scrollbar no tema amarelo
case "amarelo":
var line="#FFCC00"; //coloque a cor da variavel line
var face="#FFFF99"; //coloque a cor da variavel face
break;
}
}
//integração da folha de estilos no javascript
swith(document.body.style) {
//no tema você deu o valor das variáveis line e face. Abaixo você vê onde cada cor vai ficar.
scrollbarDarkShadowColor = line;
scrollbar3dLightColor = line;
scrollbarArrowColor="#666666"; //aqui é a cor da setinha, dependendo da cor que você escolher para line e face, é melhor trocar a cor preta pela cor branca
scrollbarBaseColor = face;
scrollbarFaceColor = face;
scrollbarHighlightColor = face;
scrollbarShadowColor = face;
scrollbarTrackColor = face;
}
}
// Inicio da função colorBar
function colorBar(){
var w = document.body.clientWidth; //variavel w, captura a largura da janela (navegador)
var h = document.body.clientHeight; //variavel h, captura a altura da janela (navegador)
var x = event.clientX;
var y = event.clientY;
//Abaixo você deve colocar as cores que devem aparecer quando o mouse passar por cima da scrollbar.
if (x > w) {
scrollBar('#FFCC66','#FFFFCC'); //coloque cores diferentes do tema, senão o efeito não será visto.
} else {
scrollBar(null, null, "amarelo"); //Aqui você deve colocar o nome do tema escolhido, no código eu tenho tema azul e tema amarelo, eu escolhi que a scrollbar tenha as cores do tema amarelo.
}
if (document.all) {
//Coloque novamente o tema escolhido. Deixe as outras duas opções do jeito que estão, com valores NULL.
scrollBar(null, null, "amarelo");
document.onmousemove = colorBar;
}
Dica: Se o fundo do seu site for branco ou uma outra cor clara, coloque uma cor escura em line e uma cor clara em face. Se o fundo do seu site for escuro, faça o contrário, coloque uma cor clara em line e uma cor escura em face.
