Scrollbar en CSS3?

[almogio]

Hola a todos! He estado buscando bastante por internet sobre como modificar un scrollbar con CSS3 pero solo he encontrado como hacerlo para Chrome. ¿Alguno sabe los atributos para que funcione la mayoría de navegadores o sabe de alguna página de referencia?

Muchas gracias! :D

[jomaruro]

Hola:

Que yo sepa las scrollbar de los navegadores no se pueden modificar, salvo en el caso del IE.

Saludos.

[alexk]

usa el buscador... una solucion seria con JS

[almogio]

Iniciado por jomaruro

Hola:

Que yo sepa las scrollbar de los navegadores no se pueden modificar, salvo en el caso del IE.

Saludos.

Si se puede, yo lo he hecho pero solo funciona en navegadores webkit

[almogio]

Iniciado por alexk

usa el buscador... una solucion seria con JS

El caso esque no quiero hacerlo de un modo que no sea CSS, pero gracias de todas formas

[kseso?]

¿Sólo css y multinavegador?
Hoy por hoy, imposible.

[jomaruro]

Hola:

Iniciado por almogio

Si se puede, yo lo he hecho pero solo funciona en navegadores webkit

Está muy bien rebatir las opiniones de los demás si están equivocados, pero almogio ha planteado una duda y creo que de todos los participantes en este hilo eres el único que sabe como hacerlo. Estaría bien que nos ilustraras a todos y nos explicaras como.

Este es el código para IE:

Código CSS:

body, html {
    scrollbar-face-color: #99ccff;
    scrollbar-shadow-color: #ccccff;
    scrollbar-highlight-color: ccccff;
    scrollbar-3dlight-color:#99ccff;
    scrollbar-darkshadow-color:#ccccff;
    scrollbar-track-color:#ccccff;
    scrollbar-arrow-color:#000033;
}
 

Tu afirmación es como si no dijeras nada, por favor, ilústranos.

Saludos.

[cristian_cena]

hola almogio, use jquery no se rompa la cabeza y css para estilizarlo. A parte de que css3 está verde todavía, léase: porcentaje de usuarios que aún andan en las tinieblas de las versiones poco gratas de ie.

[almogio]

Iniciado por jomaruro

Hola:



Está muy bien rebatir las opiniones de los demás si están equivocados, pero almogio ha planteado una duda y creo que de todos los participantes en este hilo eres el único que sabe como hacerlo. Estaría bien que nos ilustraras a todos y nos explicaras como.

Este es el código para IE:

Código CSS:

body, html {
    scrollbar-face-color: #99ccff;
    scrollbar-shadow-color: #ccccff;
    scrollbar-highlight-color: ccccff;
    scrollbar-3dlight-color:#99ccff;
    scrollbar-darkshadow-color:#ccccff;
    scrollbar-track-color:#ccccff;
    scrollbar-arrow-color:#000033;
}
 

Tu afirmación es como si no dijeras nada, por favor, ilústranos.

Saludos.

No era mi intención "despreciar" tu comentario ni mucho menos. Lo siento si te has sentido ofendido por algo de lo que he dicho, pero no era esa mi intención.
Si entras a esta dirección con un navegador webkit, verás el resultado del CSS3, si entras con otro, los scrollbars se ven como se han visto toda la vida

http://trac.webkit.org/export/41842/trunk/LayoutTests/scrollbars/overflow-scrollbar-combinations.html

[almogio]

Iniciado por kseso?

¿Sólo css y multinavegador?
Hoy por hoy, imposible.

No me refiero a un código multinavegador, me refería a algo como se hacen con las capas, pones las 3 lineas CSS, por ejemplo, para el borde de la capa:

border-radius: 0px 25px 0px 0px;
-webkit-border-radius: 0px 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px;


Aun así ni idea no¿?

Gracias a todos por contestar!

[almogio]

Iniciado por cristian_cena

hola almogio, [URL="http://jqueryui.com/demos/slider/side-scroll.html"]use jquery [/URL]no se rompa la cabeza y css para estilizarlo. A parte de que css3 está verde todavía, léase: porcentaje de usuarios que aún andan en las tinieblas de las versiones poco gratas de ie.

He barajado la posibilidad, pero he preferido no hacerlo en caso de que no pudiese con CSS·. Gracias por tu comentario :)

[kseso?]

Iniciado por almogio

Iniciado por kseso? ¿Sólo css y multinavegador?
Hoy por hoy, imposible.

No me refiero a un código multinavegador, me refería a algo como se hacen con las capas, pones las 3 lineas CSS, por ejemplo, para el borde de la capa:

border-radius: 0px 25px 0px 0px;
-webkit-border-radius: 0px 25px 0px 0px;
-moz-border-radius: 0px 25px 0px 0px; <-- Y ésto qué es? ¡Ah! No es multi, sólo tri. ¿O prefiere que lo llamemos crossbrowser?


Aun así ni idea no¿?<-- Pues si al ser imposible (sólo css y crossbrowser) prefiere pensar que nadie tiene ni idea, pues eso. Ni idea.

Gracias a todos por contestar!

[almogio]

Con tu comentario creo entender que antes no te entendí xD
Al decir código multinavegador entendí que te referias a un solo parámetro, como width, top,...que funciona en TODOS los navegadores.

[webosiris]

almogio, no se puede dar lo que NO EXISTE.

si quieres que funcione en varios navegadores, debes de usar javascript

[Jg23]

disculpen, pero si es posible, el css 3 permite cambiar la barra de navegación

Código:

/* Scrollbar */

::-webkit-scrollbar 
{	
	height: 20px;
	overflow: visible;
	width: 10px;
}

::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal 
{	
	background-color: rgba(0, 0, 0, .4);
	background-clip: padding-box;
	border-radius: 5px;
	cursor: pointer;
	display: block;
	min-height: 30px;
}

::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover 
{
	background-color: rgba(0, 0, 0, .8);
}

::-webkit-scrollbar-button 
{
	height: 0;
	width: 0;
}

::-webkit-scrollbar-track 
{	
	background-clip: padding-box;
	border-width: 0 0 0 4px;
	border: solid transparent;
}

::-webkit-scrollbar-track:hover
{
	background-color: #F5F5F5;
}

::-webkit-scrollbar-track-piece 
{
	background-clip: padding-box;	
	background-color: white;
}

::-webkit-scrollbar-track-piece:hover
{
	background-color: #F5F5F5;
}

Este es un ejemplo, aquí hay un demo : http://infosmart.mx saludos Jg.

[webosiris]

Jg23, gracias por tu aporte, pero si vas a reflotar un tema de hace 1 año, estaría bueno que comprobaras que tu respuesta sea correcta.

Eso que pones funciona, como se ha dicho antes, solo en los navegadores webkit (Chrome y Safari). No es CSS estandar.