Aplicar CSS la barra de scroll

[moNTeZIon]

Buenas a tod@s,

Sé que los estilos definidos para colorear la bara de scroll solo funcionan para Explorer (o eso dicen las miles de páginas que he visto por ahí), pero a alguien me encuentro a veces que me dice lo contrario.

Como ya me estoy volviendo majara con el tema de tanto buscar, aquí les dejo la consulta a ver qué opiniones salen...

¿Hay forma de colorear las barras de scroll en el resto de navegadores, o no?

Saludos a tod@s!

[JavierB]

Hola moNTeZIon

Pues va a ser que no. A alguno que te diga lo contrario, pidele que te dé la dirección de la página donde lo ha visto, o mejor aún que te diga como se puede hacer.

Saludos,

[moNTeZIon]

OK. Gracias por responder JavierB.
Ya me lo temía...

De todas formas, a ver si algún iluminado tiene algo que decir...

Aunque con tus 7000 mensajes no se quien te va a contradecir!!!

Saludos!

[DvD AdN]

Pués si, sólo sirve para IE y el código que se usa para eso no es estándar, intenta validar tu CSS y te dirá que no existen esas propiedades...

[JavierB]

Iniciado por moNTeZIon

Aunque con tus 7000 mensajes no se quien te va a contradecir!!!

Pues muchas veces me contradicen y eso me encanta porque me sirve para aprender más

Saludos,

[furoya]

Hola todos :

Es curioso como uno empieza interesándose por el nudo de un tema, y al final se engancha con un comentario al margen.

Y es que no me parece que la cantidad de mensajes avalen la calidad de la respuesta. Ni del respondedor.

De ninguna manera estoy diciendo que sea tu caso, JavierB, si sólo leyéramos tus mensajes, mi posición se derrumba. Pensaba en todos los que escriben cualquier cosa -aunque no aporten nada al foro- solamente para figurar en cada tema que abren.

Algunos sitios "premian" la participación con estrellitas, escuditos o algún tipo de galones, y eso puede ser buen negocio comercialmente, pero también es un incentivo para quienes escriben de aburridos, no más; y eso no es negocio para el contenido de un foro.

Tampoco estoy tratando de jusificar aquí mi mugroso puñado de mensajes usando el razonamiento inverso. Con sólo leer estas güevadas mi posición -además- se pulveriza. Pero no me podía concentrar en una respuesta al tema hasta no haber tipeado esta digresión (motivada).

Ahora sí. De alguien que no supera, a la fecha, el medio kilopost, hacia quien ya paso los 7000 mensajes ( ¡¿7000?! ¿cuántos dedos tienes? ), puedo contradecir que el color de las scrollbars no es sólo para IE5.5+.

Veamos. He leído que -con diferencia en la interpretación- el scrollbar-algo-color es aceptado por la mayoría de los navegadores (Safari, Opera, Konqueror) en distintos sistemas operativos (Windows, Mac, Linux). Lo que les debo son los enlaces, ya que -como alguna vez mencioné- yo trabajo (bah, juego) unicamente con W+IE; lo que me ha llevado no solo a deshacerme de los enlaces a sitios para otras plataformas, sino a editar códigos ajenos borrando las líneas para compatibilidad.
Algo de lo que estoy profundamente arrepentido. Debí tener visión de futuro y prever que un día iba a colaborar con un foro de páginas web, que por supuesto es para todos los navegadores.

Como alguna vez llegué a usar un Opera estando registrado aquí, sí pude postear un enlace

que nadie se anima?????

Pero de Mozilla no me guardé nada. Y Mozilla es un caso aparte. La única manera de conseguir el efecto es usando máscaras y por lo que entendí, solamente en Mac, porque en ningún caso reconoce el estilo.

Las apuestas no son a cuándo un Firefox va a incorporar el código, sino cuándo lo va a hacer el W3C. Y a ésto quería llegar.

Aunque yo no lo vi (si alguien sabe dónde está y lo puede linkear, le agradezco), se ha mencionado muchas veces que para este standard la barra de desplazamiento no pertenece al documento (sino a la ventana?), por lo tanto no se las podría modificar desde CSS.

Inmediatamente nos viene a la memoria otro caso de código creado por Microsoft para las scrollbars de sus navegadores y que ya fue incorporado : overflow-x ; overflow-y.
Pero habrá que hacer una salvedad. A pesar de la creencia general, estas propiedades no manejan las barras.
overflow : hidden , por ejemplo, hace un clip de la parte visible del documento, ocultando todo lo que sobre; lo que vuelve inútiles las scrollbars y el navegador las desaparece -no el CSS-.

La gran duda es cómo justificará el Consortium (si lo que puse 2 párrafos arriba es cierto) la inclusión del código. Porque con semejante presión de la mayoría de los usuarios y navegadores lo tendrá que hacer. Si Mozilla aún no lo usa debe ser para "no dejarlos en evidencia", y no porque tecnicamente no pueda.

saludos

furoya

[moNTeZIon]

Gracias, furoya, por dar tu opinión. Y, realmente, por corroborar la respuesta (que no se puede) gracias a los conocimientos que has adquirido (por cierto, muy profundos en algunos aspectos). Siempre es mejor saber porqué, que no saber que no se puede y ya está.

Por otro lado:

Iniciado por furoya

Es curioso como uno empieza interesándose por el nudo de un tema, y al final se engancha con un comentario al margen.

Y es que no me parece que la cantidad de mensajes avalen la calidad de la respuesta. Ni del respondedor.

Cada uno le da importancia a lo que él cree y se engancha a lo que quiere. Yo mismo no estaría escribiendo esto si no le hubieran dado mas importancia de la que tiene. A mi me ha sido respondida mi duda y lo agradezco.
Cuando para mi, es un simple comentario para simpatizar con alguien que me ayudó y asombrado por la cantidad de mensajes que tiene posteados, para otros puede tomarse como una ofensa. Como? Yo no tengo tantos mensajes, PERO SE MAS!!! Que pasa aquí?? :-p

Animo a todos, que este foro es una maravilla!
No vayamos a estropearlo con chorraditas..

[Durgeoble]

No se puede aunque puede simularse con javascrip, tal y como han dicho mas arriba con overflow: hidden; desaparecen las barras de scroll, ahora el truco esta en "hacerlas" con javascript, esto lo he visto aunque no se hacerlo pasate por el foro de javascript a preguntar.
Por cierto furoya el que desaparezcan las barras de scroll es un comportamiento totalmente normal y, aunque a priori no lo parezca, tiene su utilidad para dar unos vistosos efectos a la pagina, el comportamiento es normal ya que al no tener que hacer scroll el navegador no tiene motivos para poner barras de desplazamiento.
Personalmente considero que las barras corresponden a la aplicación y no deberian poder tocarse (al igual que abrir en una nueva ventana y funciones similares) llegando a mas, de implementarse lo primero que haria seria asegurarme de que MIS barras permacieran inalterables contra viento y marea (lo primero que me biene a la cabeza es obligar al navegador a cargar un css propio en todas las paginas con !important que, segun las especificaciones, tendria preferencia sobre cualquier otra cosa).

[furoya]

Hola todos

Iniciado por Durgeoble

... que desaparezcan las barras de scroll es un comportamiento totalmente normal ... ya que al no tener que hacer scroll el navegador no tiene motivos para poner barras de desplazamiento ...

Sí, claro, es lo que puse yo.

Es cierto que colorear las scrollbars no sirve para nada útil, pero tomarse el trabajo de evitarlo en nuestro navegador me parece una medida extrema. De ahí a impedir que nos cambien la fuente o el background que tenemos configurado hay un paso muy corto.
Y yo no le encuentro utilidad porque no soy diseñador ( a cualquiera que haya visto uno de mis ejemplos le resultará evidente ), pero a ellos les sirve. Una página que integra las barras al estilo del documento suma puntos. Por algo esta es una de las preguntas más frecuentes en el foro, y todos quieren hacerlo andar en cualquier navegador. De allí el comentario de mi extrañeza para con el standard, que no lo incorpora. Sería un golazo.

La "explicación" que encontré es la restricción para modificar componenetes de la ventana. Y no es algo que esté discutiendo. Lo que no pude es confirmarlo con una cita textual. Si además de mis ejemplos también leyeron mis mensajes, les resultará mucho más evidente que me ne frego en el estándar. Habiendo en este foro tanta gente con la camiseta del W3C, lo menos que debe haber es uno que lo haya leído, como para decirme "Sí, está en este párrafo..." o "No, furoya, te mintieron, éso no existe".

Que nadie piense que lo voy a buscar yo.

Lo que sí busqué -porque al final me hicieron sentir culpable- es algo de información sobre compatibilidad, y justo en un foro mencionan una salida digna para estandarizar el cambio de color de scrollbar. Es en el mensaje #12

XHTML and CSS scrollbar color

Si las barras pertenecen al html, éste sí puede ser alcanzado por el CSS.

Volviendo a los navegadores compatibles, en PC funciona para los más populares ( excepto Mozilla ). Al menos el scrollbar-face-color, los demás, con condiciones.

Un-colored scrollbars

scrollbar (Microsoft-Eigenschaften für Scroll-Leisten)

Sobre Mac no hay mucha información. No pudé encontrar ningún sitio que dijera que sí funciona. Y los que dicen que no, no sirven; puede que sean viejos o que quien los escribe no sepa usar el navegador.
Habrá que esperar un macuser que nos ayude.

Lo de las máscaras en JS es cierto, hay muchos ejemplos en el foro; pero yo me refería a un plug-in. Si no entendí cualquier cosa, cuando un documento tiene barras de desplazamiento con color, al navegador se le agrega una scrollbar sobre la original, y ésta sí lee los colores. Pero la queja es que no andaba en PC.
Lástima que ese sitio no lo busqué; pero mi culpa no daba para tanto.

saludos

furoya

[DvD AdN]

Yo sigo diciendo, no es estandar, no esta aprobado por el W3C , no se debe de usar

[the_NEO_JP]

Solo se colorean las de IE dependiendo del DTD, las de konqueror y las de Opera8 (hasta lo que yo recuerdo y he probado).

[furoya]

Hola de nuevo :

vulevo para linkear un tema donde se sigue preguntando sobre el asunto, pero con alguna vuelta más

Cambiar el color de la barra de desplacamietno...

Saludos

furoya

[Erik©]

tienen que crear un FAQ especial para este tema...
ya que el 99.9% de las personas se pregunta... ¬_¬

Salu2
Erik©

[furoya]

Y lo siguen haciendo.

Iba a escribir este post hace varios años, pero entre que me cerraron el tema donde quería ponerlo, y que después algún ejemplo ya comenzaba a parecer por toda la web, pensé que quizá no valí ala pena. pero hace poco se habló del asunto éste de las barras coloreadas ¿otra vez más!, y entonces comprendí que seguimos como entonces. Y que resulta que en FdW (al menos según Google) faltaban ejemplos que no fuesen para IE.
Para no seguir desparramando el punto, al fin voy a dejar unos códigos para estudiar aquí, que es un tema donde debatimos y explicamos bastante.
Digo "estudiar", porque son muestras (nadie espere un cut&paste) que necesitan perfeccionarse, adaptarse y combinarse en un mismo documento. Por supuesto, Moz-FF sigue en su capricho y aún no podemos cambiar sus scrollbars desde CSS.

Para Opera.

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">
body, html {height:100%; width: auto; margin:0; padding:0;} 

html {overflow: hidden; }

body {overflow: scroll; background-color: silver; }

h1 {
width: 150%;
background-color: white;
margin: 20px;
}

div {
//overflow:scroll; 
//height: 10%;
margin: 20px;
padding: 0 25%;
background-color: white;
color: black;
font-family: Verdana, sans-serif;
font-size: 120%;
text-align: center;
line-height: 160%;
}
 
span {
font-size: 200%; 
}

</style>
</head>
<body style="scrollbar-face-color: red; scrollbar-track-color: pink; " >
<h1>Para Opera 11.</h1>

<div>

Este ejemplo es para <b>Opera</b>. Como usa las mismas propiedades CSS que Internet Explorer 5.5 al 8.x también se ve en esos navegadores. El inconveniente (y la queja) es que solamente las acepta in-line, y es un poco forzado meterlas en la etiqueta <tt>&lt;html></tt>, así que en esta versión le di una vuelta para meterlas en <tt>&lt;body></tt>. <br>
Funciona, hasta que alguien encuentre un método o truco mejor.

<span>
☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br> ☺<br>
</span>
</div>
</body>
</html>

Para IE 9.

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">
html {
-ms-scrollbar-face-color: red; 
-ms-scrollbar-track-color: pink; 
}

body {
background-color: silver;
}

h1 {
width: 150%;
background-color: white;
}

div {
//overflow:scroll; 
//height: 10%;
padding: 0 25%;
background-color: white;
color: black;
font-family: Verdana, sans-serif;
font-size: 120%;
text-align: center;
line-height: 160%;
}
 
span {
font-size: 200%; 
}

</style>
</head>
<body>
<h1>Para Internet Explorer 9.</h1>

<div>

Este ejemplo usa el prefijo <tt>-ms-</tt> para <b>Internet Explorer 9</b>. Aunque no lo probé porque no conseguí ninguno, por comentarios en FdW sé que la versión que funcionaba desde IE 5.5 ya no es válida y no la reconoce. <br>

<span>❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br> ❦<br>
</span>
</div>
</body>
</html>

Para Chrome 5.

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"> 
<style type="text/css">
html {
margin: 0; 
padding: 0;
overflow: scroll;
}

body {
background-color: silver;
overflow: none;
}

h1 {
width: 150%;
background-color: white;
}

div {
//overflow:scroll; 
//height: 10%;
padding: 0 25%;
background-color: white;
color: black;
font-family: Verdana, sans-serif;
font-size: 120%;
text-align: center;
line-height: 160%;
}
 
::-webkit-scrollbar {
width: 16px;
height: 16px;
}
 
::-webkit-scrollbar-corner {
background-color: pink;
border: outset black;
border-width: 0 2px 2px 0;
}
 
::-webkit-resizer {
background-color: black; 
border: solid 20px red;
}

::-webkit-scrollbar-button:horizontal:increment {
border-style: solid;
width: 16px;
height: 16px;
font-size: 1px;
overflow: hidden;
background-color: red;

border-left-width: 15px;
border-top-width: 8px;
border-right-width: 1px;
border-bottom-width: 8px;

border-left-color: black;
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
}

::-webkit-scrollbar-button:vertical:increment {
border-style: solid;
width: 16px;
height: 16px;
font-size: 1px;
overflow: hidden;
background-color: red;

border-left-width: 8px;
border-top-width: 18px;
border-right-width: 8px;
border-bottom-width: 1px;

border-left-color: red;
border-top-color: black;
border-right-color: red;
border-bottom-color: red;
}

::-webkit-scrollbar-button:horizontal:decrement {
border-style: solid;
width: 16px;
height: 16px;
font-size: 1px;
overflow: hidden;
background-color: red;

border-left-width: 1px;
border-top-width: 8px;
border-right-width: 16px;
border-bottom-width: 8px;

border-left-color: red;
border-top-color: red;
border-right-color: black;
border-bottom-color: red;
}

::-webkit-scrollbar-button:vertical:decrement {
border-style: solid;
width: 16px;
height: 16px;
font-size: 1px;
overflow: hidden;
background-color: red;

border-left-width: 8px;
border-top-width: 1px;
border-right-width: 8px;
border-bottom-width: 18px;

border-left-color: red;
border-top-color: red;
border-right-color: red;
border-bottom-color: black;
}

::-webkit-scrollbar-button:vertical:increment:hover {
border-left-color: #ff8080;
border-top-color: black;
border-right-color: #ff8080;
border-bottom-color: #ff8080;
}
 
::-webkit-scrollbar-button:horizontal:increment:hover {
border-left-color: black;
border-top-color: #ff8080;
border-right-color: #ff8080;
border-bottom-color: #ff8080;
}
 
::-webkit-scrollbar-button:vertical:decrement:hover {
border-left-color: #ff8080;
border-top-color: #ff8080;
border-right-color: #ff8080;
border-bottom-color: black;
}
 
::-webkit-scrollbar-button:horizontal:decrement:hover {
border-left-color: #ff8080;
border-top-color: #ff8080;
border-right-color: black;
border-bottom-color: #ff8080;
}
 
::-webkit-scrollbar-button:vertical:increment:active {
border-left-color: lime;
border-top-color: black;
border-right-color: lime;
border-bottom-color: lime;
}
 
::-webkit-scrollbar-button:horizontal:increment:active {
border-left-color: black;
border-top-color: lime;
border-right-color: lime;
border-bottom-color: lime;
}
 
::-webkit-scrollbar-button:vertical:decrement:active {
border-left-color: lime;
border-top-color: lime;
border-right-color: lime;
border-bottom-color: black;
}
 
::-webkit-scrollbar-button:horizontal:decrement:active {
border-left-color: lime;
border-top-color: lime;
border-right-color: black;
border-bottom-color: lime;
}
 
::-webkit-scrollbar-thumb:horizontal {
background-color: red; 
border: outset 2px;
}
 
::-webkit-scrollbar-thumb:horizontal:hover {
background-color: #ff8080; 
}
 
::-webkit-scrollbar-thumb:horizontal:active {
background-color: lime; 
}
 
::-webkit-scrollbar-thumb:vertical {
background-color: red; 
border: outset 2px;
}
 
::-webkit-scrollbar-thumb:vertical:hover {
background-color: #ff8080; 
}
 
::-webkit-scrollbar-thumb:vertical:active {
background-color: lime; 
}

::-webkit-scrollbar-track {
border: none;
background-color: pink;
}

 
span {
font-size: 200%; 
}

/*

::-webkit-resizer {}
::-webkit-scrollbar {}
::-webkit-scrollbar-button {}
::-webkit-scrollbar-corner {}
::-webkit-scrollbar-thumb {}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-track-piece {}

*/

</style> 

</head>
<body> 
<h1>Para Chrome 5.</h1>

<div>
Este ejemplo es para <b>Safari / Chrome</b>. Hay varias combinaciones de pseudo elementos para lograr el efecto, y yo elegí estas. Un problema que no tuve tiempo de resolver es el de la desaparición de la imagen de la flecha en cada botón. Seguramente la original es un *.png con fondo transparente, lo que permitiría darle nuestro color de fondo; pero si no hay manera de recuperarla tendremos que agregar la propia como <tt>background-image</tt>.<br>
Ya intenté poner dentro un caracter "►", pero obviamente no me salió. Zafé casi dignamente usando botones con formato de flecha.<br>
Con <tt>webkit</tt> se pueden crear "<i>seudoeventos</i>" CSS que no se me ocure cómo ponerle a <tt>scrollbar-color</tt>; con javascript algún invento hay ... pero es hacer trampa.<br>

<span>
↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨<br>↨
</span>
</div>
</body>
</html>