Personalizar Scrollbar

Clicker · #1 (**permalink**) 06/03/2003, 16:09

Personalizar scrollbar
Hola, alguien sabe cómo hago para personalizar una barra de desplazamiento?? es decir, tengo un texto que deseo que se desplaze ya sea hacia arriba o hacia abajo mediante un scrollbar, dado el pequeño espacio que se dispone para el mismo, pero no deseo ponerle la barra de desplazamiento que win tiene por defecto, sino deseo hacer 2 imagenes gif y darles a estas la función de que desplacen el texto hacia arriba y hacia abajo.

AYUDAAAA!! POR FAVOR!!!

Gracias muchachos....

CORE · #2 (**permalink**) 07/03/2003, 11:44

Hola de nuevo

Aqui esta el codigo

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">  
#divUpControl{
	position:absolute;
	width:160px;
	left:9px;
	top:34px;
	z-index:1;
	text-align: right;
	height: 19px;
} 
#divDownControl{
	position:absolute;
	width:159px;
	left:10px;
	top:247px;
	z-index:1;
	text-align: right;
	height: 19px;
} 
#divContainer{position:absolute; width:157px; height:200px; overflow:hidden; top:51px; left:10; clip:rect(0,320,240,0); visibility:visible} 
#divContent{
	position:absolute;
	top:-18px;
	left:0px;
	width: 142px;
	height: 1064px;
} 
</style>
<script language="JavaScript">// begin absolutely positioned scrollable area object scripts 
/*
Extension developed by David G. Miles (www.z3roadster.net/dreamweaver)
Original Scrollable Area code developed by Thomas Brattli 
To add more shock to your site, visit www.DHTML Shock.com
*/

function verifyCompatibleBrowser(){ 
    this.ver=navigator.appVersion 
    this.dom=document.getElementById?1:0 
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; 
    this.ie4=(document.all && !this.dom)?1:0; 
    this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
 
    this.ns4=(document.layers && !this.dom)?1:0; 
    this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) 
    return this 
} 
bw=new verifyCompatibleBrowser() 
 
 
var speed=50 
 
var loop, timer 
 
function ConstructObject(obj,nest){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; 
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; 
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight 
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight 
    this.up=MoveAreaUp;this.down=MoveAreaDown; 
    this.MoveArea=MoveArea; this.x; this.y; 
    this.obj = obj + "Object" 
    eval(this.obj + "=this") 
    return this 
} 
function MoveArea(x,y){ 
    this.x=x;this.y=y 
    this.css.left=this.x 
    this.css.top=this.y 
} 
 
function MoveAreaDown(move){ 
	if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".down("+move+")",speed) 
	} 
} 
function MoveAreaUp(move){ 
	if(this.y<0){ 
    this.MoveArea(0,this.y-move) 
    if(loop) setTimeout(this.obj+".up("+move+")",speed) 
	} 
} 
 
function PerformScroll(speed){ 
	if(initialised){ 
		loop=true; 
		if(speed>0) objScroller.down(speed) 
		else objScroller.up(speed) 
	} 
} 
 
function CeaseScroll(){ 
    loop=false 
    if(timer) clearTimeout(timer) 
} 
var initialised; 
function InitialiseScrollableArea(){ 
    objContainer=new ConstructObject('divContainer') 
    objScroller=new ConstructObject('divContent','divContainer') 
    objScroller.MoveArea(0,0) 
    objContainer.css.visibility='visible' 
    initialised=true; 
} 
// end absolutely positioned scrollable area object scripts 

</script>
</head>

<body bgcolor="999999" onLoad="InitialiseScrollableArea()">
<!-- begin absolutely positioned scrollable area object--> 
<div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="select.gif" width="17" height="17" border="0"></a></div>
<div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="select.gif" width="17" height="17" border="0"></a></div>
<div id="divContainer"> 
  <div id="divContent">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td> <b>Scroll Area Content Start</b> <p> Lorem ipsum dolor sit amet, 
            consectetur adipscing elit, sed diam nonnumy eiusmod tempor incidunt 
            ut labore et dolore magna aliquam erat volupat.</p>
          <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor 
            cum soluta nobis eligend optio comque nihil quod a impedit anim id 
            quod maxim placeat facer possim omnis es voluptas assumenda est, omnis 
            dolor repellend. Temporem autem quinsud et aur office debit aut tum 
            rerum necesit atib saepe eveniet ut er repudiand sint et molestia 
            non este recusand.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam 
            nonnumy eiusmod tempor incidunt ut labore et dolore magna aliquam 
            erat volupat.</p>
          <p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor 
            cum soluta nobis eligend optio comque nihil quod a impedit anim id 
            quod maxim placeat facer possim omnis es voluptas assumenda est, omnis 
            dolor repellend. Temporem autem quinsud et aur office debit aut tum 
            rerum necesit atib saepe eveniet ut er repudiand sint et molestia 
            non este recusand.</p>
          <b>Scroll Area Content End</b> </td>
      </tr>
    </table>
  </div>
</div>
<!-- end absolutely positioned scrollable area object --> 
</body>
</html>

00israel · #3 (**permalink**) 15/10/2011, 18:17

Y como seria si en lugar de dos imagenes que al colocar el raton sobre ellas se desplace el texto, tuvieramos un scroll tipo "linea fina de unos 5 px de ancho" que se pudiera deslizar de arriba a abajo?

JavierB · #4 (**permalink**) 17/10/2011, 10:28

Hola 00israel

Te recuerdo el aviso que había al final de este tema y que parece que no has leído o no le has hecho ni caso.

Tema cerrado.