Aspecto de la barra de scroll

Daphne · #1 (**permalink**) 21/10/2004, 16:06

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?

jesusbet · #2 (**permalink**) 21/10/2004, 16:37

Chécate las FAQs

http://www.forosdelweb.com/f4/indice-faqs-html-116060/

Daphne · #3 (**permalink**) 22/10/2004, 06:40

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í.

JavierB · #4 (**permalink**) 22/10/2004, 09:35

Hola Daphne.

Echa un vistazo a este enlace:

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

Saludos,

Daphne · #5 (**permalink**) 24/10/2004, 06:21

Muchas gracias. :)

furoya · #6 (**permalink**) 26/10/2004, 11:28

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

Maru-X · #7 (**permalink**) 29/05/2006, 12:25

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!!!!

furoya · #8 (**permalink**) 10/08/2006, 17:24

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...