Conceptos Scroll

Es una necesidad común de poder scrollear (rollear) los contenidos de las capas para eliminar la necesidad de páginas largas. Puedes separar el contenido en pequeñas cajas scrollables para hacer que tus páginas sean menos pesadas, aunque como sea el caso estas capas contienen mucho más información.

Para entender de como scrollear una capa es muy fácil. Hay dos formas de como hacerlo. Pero te mostraré la técnica que yo creo que es la mejor la cual usa capas añadidas, y scrollea la capa hijo dentro de la capa madre.

Para saber cual es el Alto/Ancho de una capa

La primera cosa que hay que superar es de como encontrar la altura (o el ancho) de una capa que no ha sido recortada, y por el momento sus estilos CSS no han sido definidos. Por ejemplo: 

<STYLE TYPE="text/css">
<!--
#mylayerDiv {position:absolute; left:100; top:100;}
-->
</STYLE>

<DIV ID="mylayerDiv">

<P>Contenido para scroll.Contenido para scroll.
<P>Contenido para scroll.Contenido para scroll.
<P>Contenido para scroll.Contenido para scroll.
<P>Contenido para scroll.Contenido para scroll.
<P>Contenido para scroll.Contenido para scroll.

</DIV>

Aun que no he difinido todavía  la altura o el ancho de la capa, obviamente tiene que tener estas especificaciones y pueden ser tomadas.

Para Netscape:

Para encontrar el ancho o la altura de una capa cuyas dimensiones no han sido puestas, yo recomiendo usar lo siguiente: 

document.layername.document.height
document.layername.document.width

Debo decir que los valores de la altura y el ancho que va a estar recortada (clip height) y (clip width) volverá ntambién con los mismos números, sin embargo yo no creo que hace sentido conceptualmente de usar los valores del recorte porque la capa no ha tenido ningún valor de recorte asignado.

Para Internet Explorer:

En Internet Explorer no va ser posible de que uses los valores de recorte porque no han sido todavía asignados (lo cual es lo que Netscape debería de hacer), y tampoco puedes usar document height o width porque capas en Internet Explorer no tienen ellas mismas su document object. Sin embargo hay dos propiedades específicas en IE las cuales podemos usar para obtener los valores que necesitamos: 

document.all.layername.scrollHeight
document.all.layername.scrollWidth

Estos valores son los mismos como si usara las propiedades especificas de IE offsetHeight y offsetWidth.

Utilizando el DynLayer para recuperar la altura y el ancho (height and width)

Si eres bastante astuto habrás notado que para obtener la altura y el ancho en cada browser tienes que usar objetos diferentes. En Netscape la señal es document object de la capa, mientras que en IE la señal es la capa actual. Podemos usar las propiedades de DynLayer doc y event para hacer la señal a estos objetos. Recuerda cuales propiedades son la señal del documento (doc) y evento (event):

En Netscape:
doc = document.layername.document
event = document.layername

En IE:
doc = document
event = document.all.layername

Si vas a utilizar DynLayer para restablecer la altura o el ancho tendrás que usar esto : 

if (ns4) var height = mylayer.doc.height
if (ie4) var height = mylayer.event.scrollHeight

if (ns4) var width = mylayer.doc.width
if (ie4) var width = mylayer.event.scrollWidth

Yo prefiero estrujar todo en una sola línea: 

var height = (ns4)? mylayer.doc.height : mylayer.event.scrollHeight
var width = (ns4)? mylayer.doc.width : mylayer.event.scrollWidth

Yo se que parece un poco extraño de utilizar una propiedad de evento (event property) allí, pero en realidad la propiedad evento es solamente un indicador para el actual elemento de la capa. Le he llamado event porque usualmente la única necesidad de que este aspecto sea la señal de la capa es para definirle los eventos. Sin embargo lo que estamos haciendo es solamente una excepción

Ejemplo: scrollconcepts1.html [ fuente] - para un ejemplo que da los resultados de la altura y el ancho de una capa.

Aplicando este conocimiento para scrollear una capa

Si te estas preguntando porque necesito saber esto, bueno tal vez el diagrama siguiente te ayudará. Es una representación gráfica de una capa que tiene texto ("Este es mi contenido…") que esta nested adentro de otra layer que ha sido enganchada (el cuadro gris):

[diagram]

Tenemos que saber la altura de esa capa contenedor porque necesitamos saber exactamente cuanto deberemos correrla para arriba. La distancia que tenemos que correr a la capa contenedora se conoce por el "offset height", la (altura del desplazamiento). Evidentemente la altura del desplazamiento es la diferencia entre la altura de la capa contenedora y la altura de la capa de la ventana.

Entonces para ponerlo en papel, aquí está el HTML/CSS para una ventana de scroll sencilla: 

<STYLE TYPE="text/css">
<!--
#scrollWindowDiv {position:absolute; left:180; top:100; width:200; height:150; clip:rect(0,200,150,0); background-color:#C0C0C0; layer-background-color:#C0C0C0;}
#scrollContentDiv {position:absolute; left:10; top:0; width:180;}
-->
</STYLE>

<DIV ID="scrollWindowDiv">

<DIV ID="scrollContentDiv">

<P>Top

<P>Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. 
<P>Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. 
<P>Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. Content to scroll. 

<P>Bottom

</DIV>

</DIV>

Entonces para el JavaScript, he asignado DynLayers (para hacer esto automáticamente podría haber utilizado DynLayerInit()): 

function init() {
	scrollWindow = new DynLayer('scrollWindowDiv')
	scrollContent = new DynLayer('scrollContentDiv','scrollWindowDiv')
}

Y para encontrar la diferencia en altura entre el contenido capa (content layer) y la ventana capa (window layer), he utilizado la siguiente función: 

function findOffsetHeight() {
	var windowHeight = scrollWindow.h
	var contentHeight = (ns4)? scrollContent.doc.height : scrollContent.event.scrollHeight
	var offsetHeight = contentHeight - windowHeight
	alert(offsetHeight)
}

El valor de windowHeight no es nada dificultoso. Esa capa esta recortada así que resulta fácil saber la altura utilizando los valores del recorte. He incluido las propiedades w y h dentro del DynLayer para tener una manera rápida de obtener los valores del ancho y altura del recorte. De otra forma tendrás que iniciar los métodos del recorte y recuperar el clipValues('r').

Ejemplo: scrollconcepts2.html [ fuente] - para observar esta demostración - este fija la estructura del scroll y encuentra el el valor del desplazamiento de la altura.

Creando un Mechanismo de Scroll

Ahora que haz encontrado el desplazamiento de la altura, necesitarás un mecanismo para mover arriba o abajo el contenido de la capa. Para que esto sea fácil de explicar primero te explicaré como hacerlo de un modo novato.

El código siguiente encuentra la altura de desplazamiento y tiene 2 funciones, up() y down() que mueven la capa contenedora arriba o abajo. Nota que dentro de estas funciones la capa se mueve en dirección contraria - si quieres scrollear la pagina abajo, mueves la capa contenedora para arriba, y viceversa: 

function init() {
	scrollWindow = new DynLayer('scrollWindowDiv')
	scrollContent = new DynLayer('scrollContentDiv','scrollWindowDiv')

	
// find offsetHeight
	windowHeight =  scrollWindow.h
	contentHeight =  

	 (ns4)? scrollContent.doc.height
	:  scrollContent.event.scrollHeight
	offsetHeight =    contentHeight
	-  windowHeight } function
up()

{ if (scrollContent.y
	< 0)  scrollContent.moveBy(0,15) }
function

down() { if
	(scrollContent.y >  -offsetHeight) scrollContent.moveBy(0,-15)
}

Notarás de como he limitado a que largo el contenido pueda scrollear. Cuando scrolleando hacia arriba, la capa con el contenido se podrá mover solamente hacia abajo si esta no ha alcanzado toda la parte de arriba, en otras palabras una localización (location) de 0 (de donde comienza). Cuando scrolleado hacia abajo, la capa con el contenido se moverá hacia arriba hasta que alcance la parte de abajo. Sí, he dicho esto correctamente, porque si recuerdas que la capa va en la dirección opuesta al scrollear. Entonces la parte de abajo de la capa con el contenido es el negativo al desplazamiento de la altura porque esta está siempre en territorio negativo, el diagrama siguiente lo profundizará:

[diagram]

Ejemplo: scrollconcepts3.html [fuente] - con un ejemplo con un minimo de mecanismo scroll.

copyright
Casa Próxima Lección: MiniScroll