Propiedades del scroll

chatuca · #1 (**permalink**) 13/11/2003, 10:40

Hola, soy nueva en esto.

Probablemente la pregunta ya se haya hecho. Pero no la he encontrado.

Me gustaría saber si hay alguna forma de que al dar propiedades a la barra de scroll, éstas se puedan ver en todos los navegadores.

Muchisimas gracias.

JavierB · #2 (**permalink**) 13/11/2003, 13:33

Hola, chatuca. Bienvenida al Foro.

Que yo sepa la única propiedad de la barra de scroll que puedes cambiar es el color (puedes ver como hacerlo en las FAQs de Css) y solo sirve para navegadores Internet Explores 5.5 o superior.

Saludos,

chatuca · #3 (**permalink**) 14/11/2003, 03:04

Muchisimas gracias JavierB.

Me has sido de gran ayuda.

KarlanKas · #4 (**permalink**) 14/11/2003, 04:06

"... Entonces Karlankas se dió cuenta de que ese post no podía seguir en JS, pertenecía a otra familia. Ni corto ni perezoso montó su trasladador de mensajes, se dirigió al hilo en cuestión, apuntó y en 2 segundos hizo que terminaran sus días en el foro de JS. "En el foro de CSS se sentirá mucho más comodo" pensó, y una risa salió de sus labios como el agua que se escapa de un vaso que rebosa".

Karlankas, "Diario de un moderador", Editorial Planeta, 2003.

furoya · #5 (**permalink**) 05/12/2003, 13:22

Hola todos :

también se le puede cambiar el tamaño, pero creo que sólo en IE 5.5.

Saludos

furoya

JavierB · #6 (**permalink**) 05/12/2003, 13:47

Hola, furoya.

¿Podrías decirnos como cambiar el tamaño?

Saludos,

furoya · #7 (**permalink**) 10/12/2003, 06:57

Mil disculpas.

Es cierto, debí haber agregado algún ejemplo; pero en ese momento no estaba en mi máquina y no recuerdo los códigos de memoria (por eso creí que era una propiedad, como pidió chatuca, cuando en verdad era un truco).

Para resarcir mi falta, dejo un editor en beta * con vista previa, que les va a ahorrar los cálculos de proporcionalidad inversa entre la barra y el resto del documento.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title> CAMBIA TAMAÑO SCROLLBAR.</title> 
<script type="text/javascript">
function escCod(){
var bz = frm.vz.value/100;
var dz = (1/bz).toFixed(2);

frm.cb.value = "body {zoom:"+bz+"; margin:0; border:none}";
frm.cd.value = "<div style=\"zoom:"+dz+"; margin:2% 1.5%\"> DOCUMENTO </div>";
document.body.style.zoom = bz;
document.getElementById("cont").style.zoom = dz;
}
function Copia(t){
t.focus();
t.select();
document.execCommand("Copy")}
</script>

<style type="text/css">
body {zoom:2; margin:0; border:none}
input {font:10pt sans-serif}
.ipt {font-family:monospace; background-color:#cccccc; border:none}
</style>
</head> 
<body>

<div id="cont" style="zoom:0.5; margin:2% 1.5%;"> 
<h2>Cambia el tamaño de las barras de desplazamiento. (IE)</h2> 
En el ejemplo, la barra de desplazamiento está aumentada a un 200%.<br>
El documento debe escribirse dentro de un bloque (en el ejemplo se uso un 
<tt>&lt;div></tt>).<p>

<form name=frm>Ingrese un valor en porcentaje para modificar el <i>scrollbar</i> : 
<input name=vz size=3 value="100" style=text-align:right>% . &nbsp
<input type=button onclick=escCod() value=" Ver "> &nbsp
<input type=button onclick="reset();vz.focus();vz.select();escCod()" 
value=" Reset "><br>
Haga <i>click</i> sobre el <font class=ipt size=-1>texto sombreado</font> 
para copiar el código al <i>clipboard</i>.<p>

<pre>&lt;style> 
<input class=ipt name=cb value="body {zoom:1; margin:0; border:none}" 
size=60 readonly onclick=Copia(this) >
&lt;/style><p>
&lt;body>
<input class=ipt name=cd value='<div style="zoom:1; margin:2% 1.5%"> 
DOCUMENTO </div>' size=60 readonly onclick=Copia(this) >
&lt;/body></frm></pre> 
<hr style="margin-bottom:1000px;">
FIN
</div> 

</body> 
</html>

Sí, es Javascript, pero sé que nuestros moderadores me lo van a dejar pasar en este subforo porque, al fin y al cabo, lo que termina dejando es un código CSS.

Voy a buscar entre mis apuntes más efectos o trucos para la barra de desplazamiento y los posteo.

saludos

furoya

___

* beta : todo lo que empiezo, y abandono apenas compruebo que funciona.

JavierB · #8 (**permalink**) 10/12/2003, 08:07

Muy bueno. Cuando tenga un ratillo tengo que sentarme a estudiarlo con calma.

Saludos,

P.D. La espera ha merecido la pena.

furoya · #9 (**permalink**) 12/12/2003, 18:16

Hola de nuevo :

Bueno, bueno, JavierB; tampoco se necesita mucho tiempo para estudiarlo, no hice algo tan complicado...

Ya empecé a buscar otros códigos, pero me encontré con un ligero problema : no todos son en CSS ( hay HTML y JavaScript ), así que voy a postear sólo algunos aquí, el resto veremos; y si es que realmente lo merecen, claro.

Éste creo que ya lo vi en alguna FAQ, pero igual lo dejo. Usa el mismo bug que el anterior, aunque funciona desde el IE4, y sirve para poner la barra de desplazamiento vertical a la izquierda.

Código:

<html dir="rtl">
<HEAD>
<TITLE>BARRA DE DESPLAZAMIENTO A LA IZQUIERDA.</TITLE>
</HEAD>
<BODY>

<span dir=ltr style="float:left; text-align:left">

<h2>Esta página tiene dirección "<tt> rtl </tt>"; 
<p>.<p>.<p>.<p>
y el contenido dirección "<tt> ltr </tt>"
<p>.<p>.<p>.<p>
con alineación izquierda. 
<p>.<p>.<p>.<p>.<p>.<p>.<p>.<p>.</h2>
Fin de página.

</span>

</BODY>
</HTML>

Me queda pendiente el truco para la barra "transparente" o la que tiene background-image, el código debe tener algun error porque no me funciona. Lo reviso y después lo posteo.

( Ojalá crean que la espera también vale la pena. )

saludos

furoya

NOTA : El efecto está escrito en HTML por comodidad. No hay ningún motivo para no usar el formato CSS <BODY style="direction:rtl"> y <span style="direction:ltr; float:left; text-align:left"> , que son los que corresponden a este foro.

kahlito · #10 (**permalink**) 12/12/2003, 19:23

Hola furoya muy bueno los trucos sobre todo el de cambiar el tamaño

Un saludo

furoya · #11 (**permalink**) 21/12/2003, 15:58

Hola otra vez :

Gracias kahlito, me alegra que te guste el código.

JavierB : en el mensaje anterior no te agradecí la claque de smilies, aprovecho para hacerlo ahora.

Este último truco apareció con el IE5.5 y es ignorado por versiones anteriores; yo lo estaba viendo con IE5, por eso no me funcionaba. ( Hay días en que no tendría que levantarme de la cama ... ).

Una breve introducción. Si bien es posible hacer transparente el fondo o los botones de la barra de desplazamiento del documento, ésto no tiene mucha utilidad, ya que el principal uso para este efecto es que se vea la imagen de fondo del mencionado documento; lo que en Internet Explorer es imposible : el documento termina donde empieza la barra y lo único que se podrá ver entonces, es el color de fondo de la ventana.

Así las cosas, hay que recurrir al mismo método de los ejemplos anteriores; es decir : meter el contenido de nuestra página en un 'contenedor' ( en este caso un DIV ) que esté dentro de un BODY con imagen de fondo. Si el DIV tiene scrollbars transparentes, va a dejar ver el fondo del documento.

Código:

<HTML>
<HEAD>
<TITLE> SCROLLBAR TRANSPARENTE.</TITLE>
<STYLE>
.contenedor{padding:10px 15px; 
filter: progid:DXImageTransform.Microsoft.Chroma(color='#ABCDEF'); 
scrollbar-face-color:#ABCDEF; /*scrollbar-track-color:#ABCDEF;*/ 
width:100%; height:100%; overflow:auto}
</STYLE>
</HEAD>
<BODY background="http://www.forosdelweb.com/images/a/header_calendario.gif" scroll=no 
leftmargin=0 topmargin=0 marginheight=0 marginwidth=0>

<div class=contenedor>

<h2>Bloque <tt>div</tt> con barra de desplazamiento transparente.</h2>

<h1>Qwertyuiop<p>.<p>Qwertyuiop<p>.<p>Qwertyuiop<p>.<p>Qwertyuiop<p>.
<p>Qwertyuiop<p>.<p>Qwertyuiop<p>.<p>Qwertyuiop</h1>

<h3>Fin.</h3>

</div>

</BODY>
</HTML>

Últimas recomendaciones. El fondo mosaico debería ser una textura por razones obvias; cualquier parte del scrollbar puede ser transparente, pero solo son útiles face o track también por razones obvias; ni hablar de las obvias razones para no repetir dentro del 'contenedor' el mismo color que estemos "tranparentando" con el filtro ( en el ejemplo : #ABCDEF ).
Usando track y dándole al DIV un color de fondo, se consigue el efecto background-image para la barra de desplazamiento.

Felicidades

furoya

<-·DröGnÄn·-> · #12 (**permalink**) 22/12/2003, 17:01

Hola,

Muchas gracias por los tips, no tenía idea que se podía cambiar el tamaño al scroll bar.

Saludos

JavierB · #13 (**permalink**) 23/12/2003, 13:11

Hola de nuevo, furoya.

Muy bien la de colocar la barra a la izquierda (creo recordar que alguna vez se ha preguntado en el Foro) y esta última aunque menos útil está muy curiosa

Creo que estaría bien si las colocaras en las FAQs, señalando en que navegadores funcionan.

Saludos,

meila_chan · #14 (**permalink**) 28/03/2005, 11:55

Hola

soy nueva aqui, y bueno, la verdad que me ha interesado bastante el tema. Resulta que quiero añadir un scroll a mi web, tengo lo tipico, el cambio de color y eso, pero he visto algo que me ha enamorado realmente

se trata de un scroll que tiene sustituidos las flechas, y lo que seria el cuadradito que se va desplazando por imagenes.
Estoy haciendo una pagina de conejitos y me encantaria poner un conejito en lugar del cuadrado, y una zanahoria que indique la direccion superior e inferior del desplazamiento.. no se si me entendeis

Bueno, a ver si podeis ayudarme, la verdad es k yo hago webs con dreamweaver y no se demasiado en lenguajes, si podeis echarme una mano os estare muy agradecida

JavierB · #15 (**permalink**) 28/03/2005, 13:03

Hola meila_chan

Eso no puedes hacerlo con Css. Hay muchos códigos por la red que podrían servirte, aunque suelen ser algo complejos. Por ejemplo:

http://meddle.dzygn.com/esp/weblog/m...cion.scroller/

Saludos,

P.D. Me encantará ver los conejitos cuando los tengas puestos

Maximillian · #16 (**permalink**) 28/03/2005, 14:20

Resulta que soy nuevo en esto css. Ya lei la sección de faqs, y curiosamente me salieron todos exepto uno. El de cambiar el color al scroll. No me sale ni con IE ni con nada. Por eso pido a alguien que me ponga el código completo de html del ejemplo, porque estoy seguro de que estoy poniendo en un lugar incorrecto el código.

Gracias de ante mano

furoya · #17 (**permalink**) 28/03/2005, 14:48

Hola de nuevo :

meila_chan : en teoría se debería poder con CSS, pero hay un problema para leer el tamaño de los botones y terminé usando JS

Aspecto de la barra de scroll

Maximillian : prueba buscar en este mismo foro. Igual aquí va un ejemplo

Código:

 
<style>
body{scrollbar-face-color:red}
</style>

saludos

furoya

malulilla · #18 (**permalink**) 19/10/2007, 01:29

ola! estoy creando una página web y me gustaría poner las barras de desplazamiento tranparente y tan solo poner el arrow en color; he intentado usar el código que habéis puesto pero soy un poco novata en sto y no sé como hacerlo, me podriais ayudar?
Saludos y gracias

seoista · #19 (**permalink**) 19/10/2007, 04:46

Pon este style entre <head> y </head>

Cita:

Saludos.

¡Ah!, se me olvidaba, ¡¡¡ Bienvenid@ !!!

[Edito]
¡ PERDONA !, veo que no vale. Espero que te ayuden los que saben.
[/Edito]

malulilla · #20 (**permalink**) 23/10/2007, 08:42

he intentado usar el codigo q me pusiste, pero no me sale transparente, me sale como en blanco :S super raro... me podriais ayudar? muxas axias!!!!!!

furoya · #21 (**permalink**) 29/10/2007, 15:10

Me extraña eso del color blanco.
¿Alguien puede probar en un IE7 el código de seoista? Por supuesto que en un div, un tbody, un td, un textarea; no en un body porque como ya se mencionó más arriba, no tiene sentido.

Quizá ya no sea necesario usar chroma, lo que mejoraría muchísimo la performance del efecto.

Wakkos · #22 (**permalink**) 29/10/2007, 18:33

Wiiiii

como habeis cambiado! (si, ya hablo como español ¬¬)

bueno, al tema: no olvideis lo que apra mi es el znippet mas crossbrowser de scrollbars en DHTML: http://www.znippets.com/ZscrollBar2/

=)

NiUser · #23 (**permalink**) 16/06/2008, 13:39

Cita:

Iniciado por JavierB

Hola, chatuca. Bienvenida al Foro.

Que yo sepa la única propiedad de la barra de scroll que puedes cambiar es el color (puedes ver como hacerlo en las FAQs de Css) y solo sirve para navegadores Internet Explores 5.5 o superior.

Saludos,

Opera Browser tambien lo soporta