Alguna forma para customizar los scrollbars en firefox??¿

He estado buscando por internet y por lo que veo cambiarle el color al estilo internet explorer no se puede no obstante con lo que vi en esta página
http://www.twistermc.com/blog/2007/06/18/customize-firefoxs-scrollbar
e intentándolo cargar del modo "<link rel="stylesheet" type="text/css" href="scrollbars.css"> " no consigo nada, no controlo mucho así que no sé si realmente habrá alguna forma de cambiar el scroll en firefox, ojalá que si!!
Espero respuestas y gracias de antemano.

No.
En FireFox no se pueden cambiar las barras del usuario que te visita.

Sólo se podría hacer de dos maneras:
- una inviable, que sería solicitarle autorización al visitante para instalarle una extensión que le modificara dichas barras.
- otra, difícil (aunque existe algo hecho en mootools) que consistiría en ocultar las barras del navegador (overflow:hidden), meterlo todo dentro de un div, y crear una "scrollbar" ficticia, con xHTML y CSS, que se pudiera mover con javaScript.

Te dejo el script que suelo usar:

Contenido de "scrollbars.js":

Código :

function P7_VScroller(el,dr,ty,oy,spd) { //v1.7 by PVII
 var g,gg,fr,sp,pa='',slw=true,m=false,h,ly;ty=parseInt(ty);
 if((g=MM_findObj(el))!=null){gg=(document.layers)?g:g.style;}else{return;}
 if(dr=="Stop"){if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
 if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& !window.opera){pa="px";}
 if(navigator.userAgent.indexOf("NT")>-1 || navigator.userAgent.indexOf("Windows 2000")>-1){slw=false;}
 if(spd=="Slow"){sp=(slw)?2:1;fr=(slw)?40:30;}else if(spd=="Medium"){sp=(slw)?4:1;fr=(slw)?40:10;
 }else{sp=(slw)?8:4;fr=(slw)?40:10;}if(spd=="Warp"){sp=5000;}var yy=parseInt(gg.top);if(isNaN(yy)){
 if(g.currentStyle){yy=parseInt(g.currentStyle.top);}else if(document.defaultView&&document.defaultView.getComputedStyle){
 yy=parseInt(document.defaultView.getComputedStyle(g,"").getPropertyValue("top"));}else{yy=0;}}
 if(document.all || document.getElementById){h=parseInt(g.offsetHeight);
 if(!h){h=parseInt(g.style.pixelHeight);}
 }else if(document.layers){h=parseInt(g.clip.height);}ly=ty+parseInt(oy)-h;
 if(dr=="Down"){if(yy>ly){m=true;yy-=sp;if(yy<ly){yy=ly;}}}
 if(dr=="Up"){if(yy<ty){m=true;yy+=sp;if(yy>ty){yy=ty;}}}
 if(dr=="Reset"){gg.top=ty+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=false;}
 if(m){gg.top=yy+pa;if(g.toMove){clearTimeout(g.p7Magic);}g.toMove=true;
  eval("g.p7Magic=setTimeout(\"P7_VScroller('"+el+"','"+dr+"',"+ty+","+oy+",'"+spd+"')\","+fr+")");
 }else{g.toMove=false;}

(No es de mi propiedad)

En el Html...

En HEAD:

Código :

<script language="javascript" src="scrollbars.js"></script>

En BODY:

Código :

<div id="content_texto">
  <div id="flecha1">
     <a href="#" onMouseDown="P7_VScroller('texto','Up',0,0,'Fast');" onMouseUp="P7_VScroller('texto','Stop',0,0,'Fast');">
     <img src="Images/up.gif" alt="desplazar texto hacia arriba" width="15" height="15" border="0" class="borde0"></a>
  </div>
  <div id="flecha2">
     <a href="#" onMouseDown="P7_VScroller('texto','Down',0,330,'Fast')" onMouseUp="P7_VScroller('texto','Stop',0,0,'Fast');">
     <img src="Images/dn.gif" alt="desplazar texto hacia abajo" width="15" height="15" border="0" class="borde0"></a>
   </div>
   <div id="texto">
      <p>Texto con scroll</p>
   </div>
</div>

CSS:

Código :

#content_texto {
   position:relative;
   width:253px;
   height:330px;
   z-index:9;
   left: -2px;
   top: 4px;
   overflow: hidden; /* Detalle muy importante */
   text-align:justify;
}

#flecha1 {
   position:absolute;
   width:15px;
   height:15px;
   z-index:1;
   left: 234px;
   top: 21px;
}
#flecha2 {
   position:absolute;
   width:15px;
   height:15px;
   z-index:1;
   left: 234px;
   top: 308px;
}

#texto {
   position:absolute;
   width:230px;
   z-index:8;
   left: 0px;
   top: 0px;
}

Si te das cuenta encierro en una relativa todo para posicionarlo de forma absoluta y el texto si se excede lo escondo con su propiedad overflow.

A mi me funciona, echale un vistazo

Ehm...
es como indicaba.. ¿verdad?

¿Podrías poner la URL de algún itio donde lo tengas (o esté) para poder ver todos cómo queda?


Saludos.

rizome escribió:

Exacto, es precisamente lo que indicabas
Os dejo el ejemplo aquí

Se me olvidó comentar que se puede elegir entre 3 velocidades (Slow, Medium y Fast).

Código :

P7_VScroller('texto','Up',0,0,'Fast')

Si manipulas directamente el javascript, lo puedes personalizar aún más.

Tambíen recuerdo que por defecto se desplazaba con solo poner el raton por encima de la flecha, pero le cambié el evento según mis necesidades (esto es lo de menos)

El unico inconveniente es que no tiene barra de desplazamiento pero al menos a mi me sirve.

Hay una forma más fácil de hacerlo. Con un plugin para jQuery:
http://kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Además es fácil de personalizar.

Hummm me gusta! yo tenía puesto uno con un iframe pero era del tipo que si pones el ratón encima se mueve a tal velocidad y la dirección depende si lo pones en la flecha,link o lo que sea de arriba o de abajo.
Quizás se pueda aplicar esto-> (http://www.hesido.com/web.php?page=customscrollbar)? porque yo en firefox tmb veo bien estas barras, el tema es que quiero que la barra no ocupe todo el alto que tiene el iframe, hasta ahora lo había hecho con un "scrollbar remoto" (http://www.huntingground.freeserve.co.uk/style/scrollbar_remote.htm) con menor altura que la de el iframe, pero el problema me venía en que me era imposible cambiar el aspecto de las barras en firefox.
Un saludo!

La pregunta es... ¿puedo implementar el javascript anterior para un iframe? (el de http://lix.in/f37eb34d
gracias y un saludo

Creo, si no me equivoco, que la respuesta es NO...

Si te das cuenta el codigo trabaja con capas, las flechas son gifs con links y en dichos links se llama al codigo por evento. El truco esta en el overflow: hidden que oculta todo lo que no cabe en la capa y dicho javascript solo te esta moviendo la capa al completo, arriba o abajo, dandote esa "falsa ilusion".

Ahora si eres capaz de cambiar el codigo original para que trabaje con Iframes, pues fenomenal.

Igual el script que te propuso ryuz ya lo hace (no he tenido tiempo para probarlo)

Un saludo

Ehm...
El iframe no le veo problema.

Si el código funciona en una página, y tú la llamas mediante un iframe, debería de seguir funcionando.

Otro asunto sería... sobre la conveniencia de usar iframes.

Pues si se puede mediante el mismo iframe de lujo.

Aunque yo tambíen preferiria las capas...

El tema es q necesito que cargue en el iframe xq en la página principal hay un reproductor de música y al dar a una zona del menu al cargar sólo en el iframe no se pararía la reproducción, a menos de que halla otra forma de hacerlo claro... porque a mi no se me ocurrió otra. Un saludo.

Puedes sustituir el <iframe> por AJAX, y usar entonces <div>.
Aún así, el problema es el mismo, y la solución similar.