Estilo de color de Barras de Desplazamiento incompatible

Hypnoss · #1 (**permalink**) 14/07/2011, 18:46

Saludos a todos los de este foro no se si este tema valla aquí pero requiero su ayuda, estoy diseñando una pequeña página web el problema es que uso "<iframe>" y quisiera cambiarle el color a las barras de desplazamiento, lo intente hacer desde el documento HTML que se muestre en el iframe con el siguiente cogido

<STYLE type="text/css">

</STYLE>

el problema es que ni al documento HTML ni al iframe le cambia el color de la barras de desplazamiento, Pensé que era problema del Exporer 9 así que lo intenté con el Google Chrome y tampoco, mi ultimo recurso fue el FireFox y tampoco, trate de visualizarlo en Explorer 7 y nada, creen que sea un problema de compatibilidad o de plano mi código está mal?.

Agradezco si alguien tiene una sugerencia para cambiar el color a las barras de desplazamiento al <iframe>

GAST0N · #2 (**permalink**) 14/07/2011, 19:01

pero ahi estan comentadas la lineas de estilo .. sacales los 

mariomon17 · #3 (**permalink**) 14/07/2011, 20:34

Ese codigo no esta en los estandares de la W3C, si no me equivoco lo realizo Microsoft por lo que solo deberia funcionar en IE.

emprear · #4 (**permalink**) 14/07/2011, 21:26

Hypnoss:

Exactamente, esas propiedades css son extensiones propuestas por Microsoft hace ya mucho tiempo, y sólo funcionan en IE, ya que el resto de los navegadores no la ha adoptado, de todas maneras, es justo aclarar que los otros navegadores tambien han incorporado atributos propietarios.
Más alla de la cuestión, para que te funcione en IE, hay un para de modificaciones hechas por MS, a saber,

1. para que funcione correctamente las propiedades las tenes que llamar

Código CSS:

Ver originalscrollbar-3dlight-color:  #666666;
scrollbar-arrow-color:  #cc1000;
scrollbar-base-color:  #666666;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #cccccc;
scrollbar-highlight-color:  #FFFFFF;
scrollbar-shadow-color:  #666666;
scrollbar-track-color: #E6E5E6;
   /*IE8 +*/
-ms-scrollbar-3dlight-color:  #666666;
-ms-scrollbar-arrow-color:  #cc1000;
-ms-scrollbar-base-color:  #666666;
-ms-scrollbar-darkshadow-color: #FFFFFF;
-ms-scrollbar-face-color: #cccccc;
-ms-scrollbar-highlight-color:  #FFFFFF;
-ms-scrollbar-shadow-color:  #666666;
-ms-scrollbar-track-color: #E6E5E6;

Para que se vea en todas las versiones de IE

2. Si lo queres aplicar al body, se las tenes que aplicar no al tag body, sino al mismo html

Con Respecto al iframe, el color se lo tenes que aplicar en el css de la página que se carga en el iframe

Demo
http://foros.emprear.com/css/sb/

Saludos

Hypnoss · #5 (**permalink**) 15/07/2011, 22:01

Muchas gracias ese código me sirvió mucho, si jala en Explorer, que mal que no funcione para Chrome ni FireFox pero bueno al menos ya se ve bien en el Explorer muchísimas gracias.

furoya · #6 (**permalink**) 17/07/2011, 08:10

Lo del frame lo entiendo. Es un viejo problema que tardó en solucionarse

modificar scrollbar con javascript

(o al menos supongo que está solucionado).

Pero no creo que el código para colorear scrollbars no ande en IE 9. Como mucho, tendrás que agregarle los prefijos, como dice emprear. (Ah! ya vi que te anduvieron.)

Y aunque no sea totalmente compatible, supongo que lo mismo tendrás que hacer con Opera . Safari - Chrome es un incordio, porque si bien el efecto se puede hacer, da mucho más trabajo. Una vez iba a poner un ejemplo, pero el tema que había elegido porque ya tenía varios trucos para efectos en barras, me lo cerraron porque uno de los desubicados de siempre le escribió una güevada indisimulable.

En realidad es un asunto que tratamos mil veces; hasta para Mozilla / Firefox , que podría aceptar color en sus barras perfectamente. Pero sus desarrolladores se niegan a implementarlo. Lo que se nos ocurrió es que alguien se tome el trabajo de crearle un complemento para suplir la falta; y hasta donde sé, nadie lo hizo.

Voy a buscar esos temas y los linkeo; puede quie inspiren a nuevas generaciones y alguno se anime.

Scrollbar Styles

scrollbar-face-color

Cambiar el color de la barra de desplacamietno...

Aplicar CSS la barra de scroll

emprear · #7 (**permalink**) 17/07/2011, 11:17

@furoya

me estoy comiendo las uñas por saber cual fué la güevada indisimulable que posteó el desubicado, tus links (y algunos otros más), ya más por capricho que por necesidad, me los leí todos hace bastante.

El único agregado que puedo hacerle a mi ejemplo, es que efectivamente, para algunos elementos, como el <textarea> si aplicamos el estilo inline, funciona en Opera (11 al menos), pero con el body, no hay caso, incluso teniendo habilitada la opción Enable scroll bars colors en el about:config de Opera. Hasta intenté, lo que nunca habia hecho en mi vida, darle un atributo style al tag html.

Que viva la DesEstandarización !!!

Saludos

furoya · #8 (**permalink**) 21/07/2011, 12:53

Cierto, ése era un detalle que faltaba mencionar. Creo que tiene que ver con lo que se habló alguna vez sobre que la barra pertenece al navegador y no al documento, aunque después se haya separado —justamente— body de html . Igual también voy a probar si hay algún truco medio escondido.

El tema que cerraron fue

Propiedades del scroll

Y ya se estaba desbandando, hasta que alguien (que no voy a mencionar) terminó con un "yo también quiero saber" o algo parecido, que no aportaba nada a un tema que había que actualizar más que ensuciar. No recuerdo quién lo cerró.

¿De verdad te tomaste el trabajo de leer los mil y algo de post que puse? ¡Qué paciencia!

emprear · #9 (**permalink**) 21/07/2011, 14:47

Me refería a los links de tu post, y a algunos cuantos otros, miles? No no creo que se justifique.

En en la práctica, viendo los muy buenos plugins de Jquery para personalizar el scroll
http://manos.malihu.gr/tuts/jquery_c...scrollbar.html

Si lo necesito, ya tengo opciones.

Saludos