Foros del Web » Creando para Internet » HTML »

Scrollbar en CSS3?

Estas en el tema de Scrollbar en CSS3? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/06/2011, 12:19
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 5 años, 10 meses
Puntos: 0
Scrollbar en CSS3?

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
  #2 (permalink)  
Antiguo 18/06/2011, 05:23
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 14 años, 9 meses
Puntos: 361
Respuesta: Scrollbar en CSS3?

Hola:

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

Saludos.

  #3 (permalink)  
Antiguo 18/06/2011, 07:37
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 7 años, 8 meses
Puntos: 137
Respuesta: Scrollbar en CSS3?

usa el buscador... una solucion seria con JS
  #4 (permalink)  
Antiguo 18/06/2011, 09:05
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Scrollbar en CSS3?

Cita:
Iniciado por jomaruro Ver Mensaje
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
  #5 (permalink)  
Antiguo 18/06/2011, 09:05
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Scrollbar en CSS3?

Cita:
Iniciado por alexk Ver Mensaje
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
  #6 (permalink)  
Antiguo 18/06/2011, 11:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: Scrollbar en CSS3?

¿Sólo css y multinavegador?
Hoy por hoy, imposible.
  #7 (permalink)  
Antiguo 19/06/2011, 02:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 14 años, 9 meses
Puntos: 361
Respuesta: Scrollbar en CSS3?

Hola:

Cita:
Iniciado por almogio Ver Mensaje
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:
Ver original
  1. body, html {
  2.     scrollbar-face-color: #99ccff;
  3.     scrollbar-shadow-color: #ccccff;
  4.     scrollbar-highlight-color: ccccff;
  5.     scrollbar-3dlight-color:#99ccff;
  6.     scrollbar-darkshadow-color:#ccccff;
  7.     scrollbar-track-color:#ccccff;
  8.     scrollbar-arrow-color:#000033;
  9. }

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

Saludos.


Última edición por jomaruro; 19/06/2011 a las 02:25
  #8 (permalink)  
Antiguo 19/06/2011, 04:44
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 7 años, 9 meses
Puntos: 269
Respuesta: Scrollbar en CSS3?

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.
  #9 (permalink)  
Antiguo 19/06/2011, 10:56
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Scrollbar en CSS3?

Cita:
Iniciado por jomaruro Ver Mensaje
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:
Ver original
  1. body, html {
  2.     scrollbar-face-color: #99ccff;
  3.     scrollbar-shadow-color: #ccccff;
  4.     scrollbar-highlight-color: ccccff;
  5.     scrollbar-3dlight-color:#99ccff;
  6.     scrollbar-darkshadow-color:#ccccff;
  7.     scrollbar-track-color:#ccccff;
  8.     scrollbar-arrow-color:#000033;
  9. }

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
  #10 (permalink)  
Antiguo 19/06/2011, 10:58
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Scrollbar en CSS3?

Cita:
Iniciado por kseso? Ver Mensaje
¿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!
  #11 (permalink)  
Antiguo 19/06/2011, 10:59
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Scrollbar en CSS3?

Cita:
Iniciado por cristian_cena Ver Mensaje
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 :)
  #12 (permalink)  
Antiguo 20/06/2011, 13:01
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 9 meses
Puntos: 538
Respuesta: Scrollbar en CSS3?

Cita:
Iniciado por almogio Ver Mensaje
Cita:
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!
  #13 (permalink)  
Antiguo 20/06/2011, 13:32
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Scrollbar en CSS3?

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.
  #14 (permalink)  
Antiguo 21/06/2011, 03:00
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 1 mes
Puntos: 995
Respuesta: Scrollbar en CSS3?

almogio, no se puede dar lo que NO EXISTE.

si quieres que funcione en varios navegadores, debes de usar javascript
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #15 (permalink)  
Antiguo 27/07/2012, 11:38
 
Fecha de Ingreso: mayo-2012
Ubicación: República Dominicana
Mensajes: 37
Antigüedad: 4 años, 10 meses
Puntos: 4
Respuesta: Scrollbar en CSS3?

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.
  #16 (permalink)  
Antiguo 28/07/2012, 09:13
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 1 mes
Puntos: 995
Respuesta: Scrollbar en CSS3?

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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Etiquetas: css, css3, scrollbar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:44.