Foros del Web » Programación web » Javascript »

Scroll en div

Estas en el tema de Scroll en div en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/10/2008, 15:19
 
Fecha de Ingreso: marzo-2008
Mensajes: 199
Antigüedad: 6 años, 4 meses
Puntos: 0
Scroll en div

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
  #2 (permalink)  
Antiguo 28/10/2008, 11:38
 
Fecha de Ingreso: marzo-2008
Mensajes: 199
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Scroll en div

¿A nadie se le ocurre como llamar a la función detener() al llegar al principio o al final del div?
  #3 (permalink)  
Antiguo 28/10/2008, 12:15
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.931
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Scroll en div

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.
  #4 (permalink)  
Antiguo 29/10/2008, 11:08
 
Fecha de Ingreso: marzo-2008
Mensajes: 199
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Scroll en div

Cita:
Iniciado por Panino5001 Ver Mensaje
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
  #5 (permalink)  
Antiguo 29/10/2008, 11:57
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.931
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Scroll en div

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?
  #6 (permalink)  
Antiguo 29/10/2008, 12:12
 
Fecha de Ingreso: marzo-2008
Mensajes: 199
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Scroll en div

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.
  #7 (permalink)  
Antiguo 29/10/2008, 13:15
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.931
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Scroll en div

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.
  #8 (permalink)  
Antiguo 29/10/2008, 13:28
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.931
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Scroll en div

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> 
  #9 (permalink)  
Antiguo 29/10/2008, 14:00
 
Fecha de Ingreso: marzo-2008
Mensajes: 199
Antigüedad: 6 años, 4 meses
Puntos: 0
Respuesta: Scroll en div

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
  #10 (permalink)  
Antiguo 29/10/2008, 14:53
Avatar de Panino5001
Moderatroll
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 4.931
Antigüedad: 10 años, 2 meses
Puntos: 734
Respuesta: Scroll en div

Me alegra que te haya servido ;)
  #11 (permalink)  
Antiguo 28/08/2009, 15:06
 
Fecha de Ingreso: abril-2009
Mensajes: 1
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Scroll en div

Muy bueno :)
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:24.
SEO by vBSEO 3.3.2