Scroll en div

[Masane]

Hola. He conseguido hacer yo solita un par de flechitas que hacen scroll sobre un div (me ha costado sudor y sangre porque soy súper novata con JavaScript). Usando un setInterval y un clearInterval, arranco y detengo el scroll, pero me gustaría que el setInterval llamara al clearInterval cuando el scrollTop llega al límite del div. Por si no me explico bien (que me suele pasar), os pongo el código y luego os explico lo que me gustaría "arreglar".

Código HTML:

<script>
posicion = 0;

function mover(direccion)
{             
   if (direccion == "subir")
   {
      setImagenOnOff('flecha_up', 'on', 'jpg'); 
      flecha = setInterval("subir()", 50);
   }
   else if (direccion == "bajar")
   {
      setImagenOnOff('flecha_bottom', 'on', 'jpg');
      flecha = setInterval("bajar()", 50);
   }
}

function detener()
{
   clearInterval(flecha);
   setImagenOnOff('flecha_up', 'off', 'jpg');
   setImagenOnOff('flecha_bottom', 'off', 'jpg');
}

function subir()
{
  posicion -= 3;
  document.getElementById("contenidos").scrollTop = posicion;
   // llamar a detener() si llega al principio del div
}

function bajar()
{
  posicion += 3;
  document.getElementById("contenidos").scrollTop = posicion;
  // llamar a detener() si llega al div del div
}
</script> 

Bien, creo que ahora quedó más claro ^^Uu... Lo que quiero es, donde pongo los comentarios, meter alguna función o algo para llamar a la función detener(), y que deje de sumar o restar a "posicion", porque me ha pasado, de llegar al final del div, y dejar el puntero sobre la flecha, y seguir sumandole a "posicion", y luego, para subir al principio del div, he tenido que dejar el raton el mismo rato que estuvo encima de la flecha para bajar, para poder empezar a restarle a "posicion". Una lata, vamos. Hay alguna manera de saber la "longitud" del div aún usando "overflow: hidden" y un height fijo? o hay algun atributo del div o algo para preguntar algo como "if(div.scrollTop == div.endOfDiv)"???

Estoy súper perdida con esto ^^Uu

[Masane]

¿A nadie se le ocurre como llamar a la función detener() al llegar al principio o al final del div?

[Panino5001]

Podrías hacerlo, pero no tiene sentido, ya que el scroll no avanzará más allá de sus posibilidades ni arriba ni abajo. Y como ya tenés un clearInterval en el onmouseout de los botones (imagino que invocarás a detener con ese evento, no?), eso es suficiente para lo que querés hacer.

[Masane]

Iniciado por Panino5001

Podrías hacerlo, pero no tiene sentido, ya que el scroll no avanzará más allá de sus posibilidades ni arriba ni abajo. Y como ya tenés un clearInterval en el onmouseout de los botones (imagino que invocarás a detener con ese evento, no?), eso es suficiente para lo que querés hacer.

Sí, se para y no avanza más, pero sigue restando o sumando en la variable posicion mientras el puntero esté sobre las flechas, y lo que pretendo es que, aún estando encima de las flechas, deje de sumar o restar al llegar al top o al bottom del div, osea, llamar a detener(), porque si no luego, para hacer la operación contraria (subir si estaba bajando o bajar si estaba subiendo), tengo que dejar el puntero sobre la flecha el tiempo que haga falta hasta que la variable posicion coja el valor necesario para que el div comience de nuevo ha hacer scroll, no se si me he explicado. Pongo un ejemplo

El height del div es 200, y yo dejo el puntero sobre la flecha de bajar hasta que la variable posicion (que inicialmente vale 0) coja el valor 250. Pues bien, para que, al poner el puntero sobr e la flecha para subir, se realice el scroll en sentido contrario (subir), tengo que mantener el puntero sobre la flecha sin ver ningún tipo de scroll hasta que la variable posicion vuelva a coger el valor 200 (osea, que me tengo que esperar hasta que se reste lo suficiente como para que llegue a 200), y puede dar la impresión de que el scroll no funciona, y no quiero que mis visitantes piensen eso de mi precioso scroll

Espero que ahora haya quedado más claro lo que pretendo ^^Uu

[Panino5001]

Mmm, entonces por qué no iniciar la suma o la resta desde el scrollTop actual del elemento (elemento.scrollTop+=3 ó elemento.scrollTop-=3) en lugar de hacerlo como lo estás haciendo?

[Masane]

Creo que no te he entendido bien... ¿Quieres decir sumar y restar sobre el scrollTop actual? Eso hago, lo que pasa es que al principio de cargar la página, el scrollTop del div está al principio del mismo, así que la variable posicion es 0, y luego ya se va sumando y restando conforme se haga scroll.

[Panino5001]

No, no es lo que hacés ahora. Ahora llevás el scrollTop al valor de tu contador, de manera que podés estar haciendo elemento.scrollTop=5000, en cambio, como te estoy diciendo, siempre partís del valor de scrollTop en lugar del valor del contador.

[Panino5001]

Fijate esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<script>
var flecha;
 
function detener()
{
   clearInterval(flecha);
}
 
function subir()
{
    flecha=setInterval(function(){
  document.getElementById("contenidos").scrollTop -=3;
  },50);
}
 
function bajar()
{
{
    flecha=setInterval(function(){
  document.getElementById("contenidos").scrollTop +=3;
  },50);
}
}
</script>
<body>
<div id="contenidos" style="width:300px; height:200px; overflow:hidden">Bien, creo que ahora quedó más claro ^^Uu... Lo que quiero es, donde pongo los comentarios, meter alguna función o algo para llamar a la función detener(), y que deje de sumar o restar a "posicion", porque me ha pasado, de llegar al final del div, y dejar el puntero sobre la flecha, y seguir sumandole a "posicion", y luego, para subir al principio del div, he tenido que dejar el raton el mismo rato que estuvo encima de la flecha para bajar, para poder empezar a restarle a "posicion". Una lata, vamos. Hay alguna manera de saber la "longitud" del div aún usando "overflow: hidden" y un height fijo? o hay algun atributo del div o algo para preguntar algo como "if(div.scrollTop == div.endOfDiv)"???
 
Estoy súper perdida con esto ^^UuBien, creo que ahora quedó más claro ^^Uu... Lo que quiero es, donde pongo los comentarios, meter alguna función o algo para llamar a la función detener(), y que deje de sumar o restar a "posicion", porque me ha pasado, de llegar al final del div, y dejar el puntero sobre la flecha, y seguir sumandole a "posicion", y luego, para subir al principio del div, he tenido que dejar el raton el mismo rato que estuvo encima de la flecha para bajar, para poder empezar a restarle a "posicion". Una lata, vamos. Hay alguna manera de saber la "longitud" del div aún usando "overflow: hidden" y un height fijo? o hay algun atributo del div o algo para preguntar algo como "if(div.scrollTop == div.endOfDiv)"???
 
Estoy súper perdida con esto ^^UuBien, creo que ahora quedó más claro ^^Uu... Lo que quiero es, donde pongo los comentarios, meter alguna función o algo para llamar a la función detener(), y que deje de sumar o restar a "posicion", porque me ha pasado, de llegar al final del div, y dejar el puntero sobre la flecha, y seguir sumandole a "posicion", y luego, para subir al principio del div, he tenido que dejar el raton el mismo rato que estuvo encima de la flecha para bajar, para poder empezar a restarle a "posicion". Una lata, vamos. Hay alguna manera de saber la "longitud" del div aún usando "overflow: hidden" y un height fijo? o hay algun atributo del div o algo para preguntar algo como "if(div.scrollTop == div.endOfDiv)"???
 
Estoy súper perdida con esto ^^UuBien, creo que ahora quedó más claro ^^Uu... Lo que quiero es, donde pongo los comentarios, meter alguna función o algo para llamar a la función detener(), y que deje de sumar o restar a "posicion", porque me ha pasado, de llegar al final del div, y dejar el puntero sobre la flecha, y seguir sumandole a "posicion", y luego, para subir al principio del div, he tenido que dejar el raton el mismo rato que estuvo encima de la flecha para bajar, para poder empezar a restarle a "posicion". Una lata, vamos. Hay alguna manera de saber la "longitud" del div aún usando "overflow: hidden" y un height fijo? o hay algun atributo del div o algo para preguntar algo como "if(div.scrollTop == div.endOfDiv)"???
 
Estoy súper perdida con esto ^^UuBien, creo que ahora quedó más claro ^^Uu... Lo que quiero es, donde pongo los comentarios, meter alguna función o algo para llamar a la función detener(), y que deje de sumar o restar a "posicion", porque me ha pasado, de llegar al final del div, y dejar el puntero sobre la flecha, y seguir sumandole a "posicion", y luego, para subir al principio del div, he tenido que dejar el raton el mismo rato que estuvo encima de la flecha para bajar, para poder empezar a restarle a "posicion". Una lata, vamos. Hay alguna manera de saber la "longitud" del div aún usando "overflow: hidden" y un height fijo? o hay algun atributo del div o algo para preguntar algo como "if(div.scrollTop == div.endOfDiv)"???
 
Estoy súper perdida con esto ^^Uu</div>
<br />
<a href="#" onmousedown="subir()"  onmouseup="detener()">subir</a> <a href="#" onmousedown="bajar()" onmouseup="detener()">bajar</a> 
</body>
</html> 
  

[Masane]

Hasta ahora no te había entendido lo que pretendías decirme XD

Lo he cambiado y ahora funciona perfectamente.

Muchas gracias por tu tiempo Panino5001, me has ayudado mucho

[Panino5001]

Me alegra que te haya servido ;)

[TePartire80]

Muy bueno :)