Problema con Scroll en DIV

lexandro12 · #1 (**permalink**) 24/01/2010, 15:38

Bueno espero que me puedan ayudar...
Estaba armando un código, busqué en distintas páginas y al final intenté armar mi propio scrolling.
Lo que yo queria era hacer scroll en el DIV al pasar el mouse en una pequeña imagen.
Pero al pasar el raton el scroll sube y baja y no se detiene... este es mi código:
(en este ejemplo uso dos enlaces en lugar de imágenes)

Cita:

<html>
<head><title></title>

<script language='javascript'>
function move_up() {
x = scroll_clipper.scrollTop;
scroll_clipper.scrollTop = x - 20;
}

function move_down() {
x = scroll_clipper.scrollTop;
scroll_clipper.scrollTop = x + 20;
}

function mover(y) {
switch(y) {
case 1:
var intup = setInterval("move_up()",500);
break;
case 2:
var intdw = setInterval("move_down()",500);
break;
default:
document.write("No variable found");
}
}

function detener(z) {
switch(z) {
case 1:
scroll_clipper.clearInterval(intup);
break;
case 2:
scroll_clipper.clearInterval(intdw);
break;
default:
document.write("No variable found");
}
}
</script>

</head>
<body>
<a href='#' onMouseOver="javascript:mover(1);" onMouseOut="javascript:detener(1);">Move UP</a><br>
<a href='#' onMouseOver="javascript:mover(2);" onMouseOut="javascript:detener(2);">Move Down</a>
<p><div id="scroll_clipper" style="position:absolute; width:150px; height: 150px; overflow:hidden;">
<div id="scroll_text" style="background-color:yellow;">
<p>Linea 1</p>
<p>Linea 2</p>
<p>Linea 3</p>
<p>Linea 4</p>
<p>Linea 5</p>
<p>Linea 6</p>
<p>Linea 7</p>
<p>Linea 8</p>
<p>Linea 9</p>
<p>Linea 10</p>
</div>
</div>
</body>
</html>

Lo que se supuse que deberia de hacer este código es al pasar el ratón por el enlace respectivo deberia subir o bajar como si fuera una scrollbar, y al sacar el ratón debería dejar de moverse.
Pero lo que pasa en realidad es que se mueve hasta ya no poder más y si se pasa el ratón por ambos enlaces pues el scroll hace uno arriba y uno abajo y nunca se detiene.
¿Qué es lo que esta mal?
Gracias

zerokilled · #2 (**permalink**) 24/01/2010, 17:10

aparte de que estas haciendo referencia al elemento de forma incorrecta, aunque no es el problema como tal, sucede que no estas deteniendo correctamente el intervalo. primero, que la variable que almacena la identificacion del intervalo es una variable local de la funcion por lo que tienes que hacerlo global eliminando el keyword var. y segundo, estas invocando la funcion clearInterval de forma incorrecta. la funcion pertenece al objeto window y no al elemento, simplemente invocas la funcion como cualquier otra.

lexandro12 · #3 (**permalink**) 24/01/2010, 18:43

Gracias!!!

ya funciona

Y sobre lo que dijiste de:

Cita:

estas haciendo referencia al elemento de forma incorrecta

No estoy seguro pero creo que te refieres a que debí de llamarlo asi

Cita:

document.GetByElementId('scroll_clipper').scrollTo p;

En lugar de utilizar directamente

Cita:

scroll_clipper.scrollTop

Bueno xD Gracias por la correción la voy a recordar hasta que la memoria me falle y bueno lo que pasa es que era una búsqueda de distintas páginas y combiné todo lo que leí para obtener el resultado que queria, porque los códigos que estaban en linea para hacer scroll eran demasiado extensos lineas de lineas y aunque eran compatibles con más navegadores preferia entender los principios básicos haciendo mi propio código y como en el ejemplo que leí de scroll habia estado directamente como "scroll_clipper.scrollTop" no se lo cambié porque funcionaba de esa forma...

Y de verdad que voy a tener muy en cuanta tus correcciones =) para no cometer el mismo error =)
Gracias de nuevo!
Saludos!

zerokilled · #4 (**permalink**) 24/01/2010, 18:53

Cita:

No estoy seguro pero creo que te refieres a que debí de llamarlo asi

Código:

document.getByElementId('scroll_clipper').scrollTop;

es correcto, a eso me referia. si haces la referencia directa, es muy probable que no te funcione en todos los navegadores. la referencia directa primero aparecio en iexplorer. algunos navegadores lo soportan pero apuesto que fue para acomodarse a las costumbre de los desarrolladores pese a que no es la forma correcta. ¡animo!