Foros del Web » Creando para Internet » CSS »

Propiedades del scroll

Estas en el tema de Propiedades del scroll en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/11/2003, 10:40
 
Fecha de Ingreso: noviembre-2003
Mensajes: 4
Antigüedad: 14 años, 1 mes
Puntos: 0
Propiedades del scroll

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.

  #2 (permalink)  
Antiguo 13/11/2003, 13:33
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #3 (permalink)  
Antiguo 14/11/2003, 03:04
 
Fecha de Ingreso: noviembre-2003
Mensajes: 4
Antigüedad: 14 años, 1 mes
Puntos: 0
Muchisimas gracias JavierB.

Me has sido de gran ayuda.
  #4 (permalink)  
Antiguo 14/11/2003, 04:06
Avatar de KarlanKas
Moderador extraterrestre
 
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 16 años
Puntos: 60
"... 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.
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.

Última edición por KarlanKas; 14/11/2003 a las 04:10
  #5 (permalink)  
Antiguo 05/12/2003, 13:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

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

Saludos

furoya
  #6 (permalink)  
Antiguo 05/12/2003, 13:47
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola, furoya.

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

Saludos,
  #7 (permalink)  
Antiguo 10/12/2003, 06:57
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.

Última edición por furoya; 25/10/2009 a las 10:33 Razón: Actualicé el código. Probado en IE 7.
  #8 (permalink)  
Antiguo 10/12/2003, 08:07
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771


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

Saludos,

P.D. La espera ha merecido la pena.
  #9 (permalink)  
Antiguo 12/12/2003, 18:16
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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.


Última edición por furoya; 03/01/2004 a las 08:20
  #10 (permalink)  
Antiguo 12/12/2003, 19:23
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola furoya muy bueno los trucos sobre todo el de cambiar el tamaño

Un saludo
  #11 (permalink)  
Antiguo 21/12/2003, 15:58
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #12 (permalink)  
Antiguo 22/12/2003, 17:01
Avatar de <-·DröGnÄn·->  
Fecha de Ingreso: diciembre-2002
Ubicación: Mendoza, Argentina
Mensajes: 1.405
Antigüedad: 15 años
Puntos: 1
Hola,

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

Saludos
__________________
Diego Crescentino

Gracias por la ayuda...
  #13 (permalink)  
Antiguo 23/12/2003, 13:11
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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,
  #14 (permalink)  
Antiguo 28/03/2005, 11:55
 
Fecha de Ingreso: marzo-2005
Mensajes: 1
Antigüedad: 12 años, 8 meses
Puntos: 0
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
  #15 (permalink)  
Antiguo 28/03/2005, 13:03
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
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
  #16 (permalink)  
Antiguo 28/03/2005, 14:20
Avatar de Maximillian  
Fecha de Ingreso: marzo-2005
Ubicación: México
Mensajes: 261
Antigüedad: 12 años, 8 meses
Puntos: 0
Pequeño problema

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
  #17 (permalink)  
Antiguo 28/03/2005, 14:48
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
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
  #18 (permalink)  
Antiguo 19/10/2007, 02:29
 
Fecha de Ingreso: octubre-2007
Mensajes: 2
Antigüedad: 10 años, 1 mes
Puntos: 0
Sonrisa Re: Propiedades del scroll

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
  #19 (permalink)  
Antiguo 19/10/2007, 05:46
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Re: Propiedades del scroll

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

Cita:
<style type="text/css">
body,html {
scrollbar-face-color: transparent;
scrollbar-highlight-color: transparent;
scrollbar-shadow-color: transparent;
scrollbar-3dlight-color: transparent;
scrollbar-arrow-color: #ff0000;
scrollbar-track-color: transparent;
scrollbar-darkshadow-color: transparent;
}
</style>
Saludos.

¡Ah!, se me olvidaba, ¡¡¡ [email protected] !!!

[Edito]
¡ PERDONA !, veo que no vale. Espero que te ayuden los que saben.
[/Edito]
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·

Última edición por seoista; 19/10/2007 a las 06:05 Razón: Desdiciéndome de lo he dicho
  #20 (permalink)  
Antiguo 23/10/2007, 09:42
 
Fecha de Ingreso: octubre-2007
Mensajes: 2
Antigüedad: 10 años, 1 mes
Puntos: 0
Sonrisa Re: Propiedades del scroll

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!!!!!!
  #21 (permalink)  
Antiguo 29/10/2007, 16:10
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Re: Propiedades del scroll

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.
  #22 (permalink)  
Antiguo 29/10/2007, 19:33
Avatar de Wakkos
Colaborador
 
Fecha de Ingreso: octubre-2001
Ubicación: (cerca)
Mensajes: 1.795
Antigüedad: 16 años, 1 mes
Puntos: 59
Re: Propiedades del scroll

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/

=)
__________________
Cool Village
@Wakkos
  #23 (permalink)  
Antiguo 16/06/2008, 14:39
 
Fecha de Ingreso: abril-2008
Mensajes: 5
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Propiedades del scroll

Cita:
Iniciado por JavierB Ver Mensaje
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
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.
Tema Cerrado

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 22:18.