Ayuda Con Scrollbars!!!

Clicker · #1 (**permalink**) 06/03/2003, 13:05

Hola muchachos, estoy haciendo una web muy sencilla y pequeña, tanto en número de páginas interuiores como en tamaño (650 x 400 px). Lo que deseo es insertar texto informativo en las páginas interiores, pero es una buena cantidad de texto que si inserto en toda su extensión, haría que la página en sí, crezca en tamaño (ya no serían 650 x 400 px), por tal motivo, deseo incluir scroolbars en la parte donde se encuentra el texto, de esta manera, la página queda del mismo tamaño y la persona que desea leer solo mueve el scrool hacia arriba o abajo.

Algo como lo que encuentran en esta página, en el link ¨ABOUT¨(hagan click en ¨ABOUT¨): http://www.maddenmedia.com/maddenmedia/index_html.html

Gracias por su ayuda muchachos.

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

Hola
Pudes usar simplemente esto
<style>
#capa{
position:absolute;
left:149px;
top:28px;
width:391px;
height:153px;
z-index:1;
overflow: auto;
}</style

<div id="CAPA">aqui metes tu contenido</div>

pero si quieres personalizar las flechas y que se mueva automaticamente el contenido es asi

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


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">
<b>Aqui metes tu contenido</b>
  </div>
</div>
</body>
</html>

Saludos