Foros del Web » Creando para Internet » HTML »

Aspecto de la barra de scroll

Estas en el tema de Aspecto de la barra de scroll en el foro de HTML en Foros del Web. Tengo un colega que dice que se pueden cambiar los cuadraditos de la barra de scroll (los del triangulito) y poner unos del diseño que ...
  #1 (permalink)  
Antiguo 21/10/2004, 17:06
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
Pregunta Aspecto de la barra de scroll

Tengo un colega que dice que se pueden cambiar los cuadraditos de la barra de scroll (los del triangulito) y poner unos del diseño que uno quiera. Yo creo que no se puede hacer, pero él insiste en que ya lo hizo una vez, aunque no recuerda cómo es (y lo necesita de nuevo).

¿Qué información tenéis al respecto?
  #2 (permalink)  
Antiguo 21/10/2004, 17:37
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
Chécate las FAQs

http://www.forosdelweb.com/f4/indice-faqs-html-116060/
  #3 (permalink)  
Antiguo 22/10/2004, 07:40
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
Gracias, jesusbet, pero no es eso lo que buscaba. Sé que se puede quitar la barra, sé que se puede hacer transparente (la principal no, que yo sepa), lo que no sé es si hay algún modo de hacer un scroll en el que los cuadraditos sean el dibujo que tú quieres (como en el caso de los cursores, por ejemplo).

Yo creo que no se puede, pero el colega éste insiste en que sí.
  #4 (permalink)  
Antiguo 22/10/2004, 10:35
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 10 meses
Puntos: 771
Hola Daphne.

Echa un vistazo a este enlace:

http://squidfingers.com/code/dhtml/?id=divscroller2

Saludos,
  #5 (permalink)  
Antiguo 24/10/2004, 07:21
 
Fecha de Ingreso: octubre-2003
Ubicación: Madrid
Mensajes: 320
Antigüedad: 14 años, 1 mes
Puntos: 0
Muchas gracias. :)
  #6 (permalink)  
Antiguo 26/10/2004, 12:28
(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 :

un truco más para no tener que reemplazar totalmente la barra de desplazamiento.

Código:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>CAMBIO DE BOTONES SCROLLBAR.</TITLE>
<script>
var ancho1,ancho2,tamano;
var sobre=0;

function medir1(){
document.body.style.overflow="scroll";
ancho1=document.body.clientWidth;
document.body.style.overflow="hidden";
setTimeout("medir2()",100)
}
function medir2(){
ancho2=document.body.clientWidth;
tamano=ancho2-ancho1;
document.getElementById("flecha1").style.height = tamano+"px";
document.getElementById("flecha2").style.height = tamano+"px";
}

function sube(){
if(sobre==1){
posicion=document.getElementById("contenedor");
posicion.scrollTop = posicion.scrollTop-10;
setTimeout("sube()",50);
}}

function baja(){
if(sobre==1){
posicion=document.getElementById("contenedor");
posicion.scrollTop = posicion.scrollTop+10;
setTimeout("baja()",50);
}}

</script>

<style>
body{margin:0; width:100%; height:100%; }
html{margin:0; width:100%; height:100%; overflow:hidden; }
#contenedor{height:100%; overflow:auto; background:#cfc; }

#contenido{padding:15px 10px; }

#flecha1{position:absolute; top:0; right:1px; z-index:100; background-color:buttonface; }
#flecha2{position:absolute; bottom:0; right:1px; z-index:100; background-color:buttonface; }
h1{line-height:200%; }
</style>
</HEAD>
<BODY onload=medir1()>

<div id="contenedor">
<div id="contenido">

<h2> Reemplaza botones en barra de desplazamieno con imágenes. (IE , FF)</h2>
<h1>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29

</div>
</div>

<img src="http://www.forosdelweb.com/images/smilies/dedosarriba.gif " id="flecha1" onmouseover="sube()" onmouseout="sobre=0" onmouseup="sobre=0" onmousedown="sobre=1;sube()"> 
<img src="http://www.forosdelweb.com/images/smilies/dedosabajo.gif" id="flecha2" onmouseover="baja()" onmouseout="sobre=0" onmouseup="sobre=0" onmousedown="sobre=1;baja()">

</BODY>
</HTML>
Está hecho para IE y FF, no porque crea que es imposible adaptarlo a otros navegadores; sino porque yo no sé hacerlo.

saludos

furoya

Última edición por furoya; 26/09/2005 a las 12:05
  #7 (permalink)  
Antiguo 29/05/2006, 13:25
 
Fecha de Ingreso: mayo-2006
Mensajes: 1
Antigüedad: 11 años, 6 meses
Puntos: 0
Hola! Cómo puedo hacerlo????

Hola! quiero citar el enlace que ofrece JavierB para Daphne. La barra de desplazamiento que estoy buscando es similar a la citada en esa web. Yo necesito incluirlo dentro de mi web, cuyo color de fondo es bordó. El tema es que quiero que el scroll pase desapercibido, camuflándolo con el mismo color. No estoy muy canchera con este tema y necesitaría toda la ayuda posible, especialmente dónde pegar el código dentro de la página. Trabajo con Dreamweaver.
A ver si me explico mejor, no quiero cambiar la barra del navegador, sólo del scrol que tengo dentro de un cuadro de multitexto dentro de mi web.
Desde ya Mil gracias y un saludo enorme a todos!!!!
  #8 (permalink)  
Antiguo 10/08/2006, 18:24
(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 Maru-X :

Me gustaría ayudarte, más que nada porque para llegar hasta este tema debes haber usado un buscador; y eso merece un reconocimiento. Siempre insisto en que es mejor buscar antes que postear.
Pero no sé si pueda hacerlo. Tengo la impresión de que estás usando un DW no porque te resulta más cómodo sino porque no entiendes ni media etiqueta de código y esto dificulta no sólo que leas cualquier ejemplo sino además que nos podamos comprender entre nosotros.

En primer lugar, no tengo la menor idea de lo que es un " cuadro multitexto ", puedo suponer que te refieres a un textarea pero más bien estoy adivinando.

Por otro lado, seguro interpretaste mal el ejemplo que enlazó JavierB . Allí se ve un bloque div sin barras de desplazamiento y con unas imágenes a la derecha que simulan una scrollbar . Un escript permite arrastrar el "botón deslizable" y otro lee su posición para calcular el desplazamiento del div y así mover su contenido.
No tiene nada que ver con maquillar barras para disimularlas contra el fondo.
Eso se podría hacer usando algunas propiedades CSS ( scrollbar-face-color: ; scrollbar-arrow-color:; y otras), pero van a funcionar bien en Internet Explorer 5.5+, los demás navegadores las soportan a medias o las ignoran.

Lo que no entiendo muy bien es para qué usar una barra de desplazamiento y pintarla luego hasta que quede oculta. ¿No es más fácil quitarla?

Código:
<textarea style = "overflow:hidden;" ></textarea>
Estoy seguro de que DW te permite poner estos estilos pero ten en cuenta que al usuario de tu página se le va a hacer difícil mover un contenido si no puede ver su scrollbar .

Cambio dinámico del color de los scroll

como ponerle color a la barra de costado

Cambiar el color de la barra de desplacamietno...
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

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 14:40.