Ver Mensaje Individual
  #7 (permalink)  
Antiguo 05/10/2012, 09:09
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 6 meses
Puntos: 317
Respuesta: Scrollbar en un DIV

Cita:
Iniciado por Zeuser Ver Mensaje
He usado el buscador. Y solo veo modificaciones de la scrollbar general.

Yo quiero modificar el aspecto de una scrollbar en una capa con overflow auto.
Sip. Son la misma. Tratá de entender los códigos. Aunque no sean CSS estandarizado, y no funcionen en todos y cada uno de los navegadores, se pueden interpretar. Hay que hacer un esfuercito por aprender CSS.

Igual -insisto- si vas a hacer una página 'industrial', vas a caer en un escript que las reemplace. Especialmente si es para una capa solamente.


Es una lástima que FF no las acepte. Acá tengo una que se basa en XUL, que no la hice yo y no recuerdo dónde la encontré; pero de momento es para Chr.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>

<style type="text/css">
#div1 {-webkit-box-align: stretch; background-color: yellow; height:300px; width: 50%; 
border: 2px solid black; }

#div2 {-webkit-box-align: center; background-color: red; width: 50%; 
border: 2px solid black; }

::-webkit-scrollbar {
    margin-right: 5px;
    background-color: #bdd9d5;
	border-radius: 6px;
    width: 12px;
}
::-webkit-scrollbar-track {
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    border: 1px #eee solid;
    border-radius: 12px;
    background: #C7573A;
    box-shadow: 0 0 8px rgba(0,0,0,0.3) inset;
    -webit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #bbb;
    box-shadow: 0 0 8px rgba(0,0,0,0.3) inset;
}
::-webkit-scrollbar-thumb:hover { 
	background: #b7472A; 
}	
pre {
	width: 600px;
	height: 200px;
	overflow:auto;
}
</style>
</head>
<body>
<pre><div id=div1> <div id=div2>qwertyuiop</div> </div></pre>
</body>
</html>
Para más data, podés ver alguno de los enlaces relacionados que encontraste en la búsqueda, un ejemplo hecho por mí en un tema debe haber. Aunque no sé si le puse comentarios.