Para abajo con el scroll

Contenido

Problema que ya me he encontrado un par de veces creando aplicaciones Ajax: tener una zona de pantalla con scroll vertical en la que ir soltando texto, forzando al scroll a permanecer abajo (aunque sólo si estaba abajo previamente).

La solución la he sacado del código fuente de Firebug Lite. Consiste en lo siguiente. Cada vez que se añada contenido al area objetivo:

Determinar si el scroll está abajo.
Insertar el contenido deseado.
Mover el scroll al fondo si estaba así en el primer paso.

El problema es conseguir código Javascript portable para los pasos 1 y 3. Para el primer paso, hay que hacer:

var isScrolledToBottom = target.scrollTop + target.offsetHeight >= target.scrollHeight;

Y para el segundo:

if (isScrolledToBottom) {
	target.scrollTop = target.scrollHeight - target.offsetHeight;
}

Y así de fácil. Dejo un ejemplo demostrativo aquí debajo, con el código Javascript incrustado en la página, para rápida referencia:

Aquí van a empezar a salir lineas

Volver al principio de la página
Volver al principio del contenido
Saltar al final

Mil gracias por el articulo, ya hace mucho tiempo que estaba buscando como solucionar ese problema y nada de nada, ahora por fin se desplaza el scrollbar automaticamente al insertar texto utilizando ajax.. si no fuera por este articulo, ahora mismo estaría bajando el escrollbar manualmente en un chat que implemente...

magocrab
w w w . g u a y u .c o m

» respuesta

Pero mira que eres aburrido, Pablo. Debe ser que tienes mucho trabajo.

La próxima vez, en lugar de "línea número tal", insertas hechos de Chuck Norris.

Y de paso, cuando hagas un script que de forma dinámica coja todos los hechos de Chuck Norris de inciclipedia o similar, y los meta en una tabla, me lo pasas, que lo necesito para mi generador automático ;-).

¡Saludines!

P.D.: Ahora sé el tiempo que pierdo en tú página, en segundos :-D

» respuesta

En algo más de nueve horas, debe dar un overflow, suponiendo que hayas usado un int. ¿no?

Salvador

» respuesta

Veras me interesa que en mi web se bajen las scrollbars automaticamente al entrar o actualizar, creo que este codigo me puede servir pero yo no tengo ni idea de javascript, aun estoy con el PHP XD, si pudieras pasarme una copia del codigo de principio a fin de como tengo que ponerlo te lo agradeceria.

Harlinboy

» respuesta

No me enero de nada del scroll ese, a mi estás cosas de pc...en fin, pásalo bien.

Deica

» respuesta

Está guay, pero no veo que funcione como debe exactamente.

Al ponerte en una línea que no es la última, lo que hace es ir bajando al mismo ritmo que entra texto, y esto no debería ser así. Si estás en una línea que no es la última, yo creo que debería quedarse ahí a pesar del texto que entra.

» respuesta

@Ángel: cierto, lo que realmente ocurre es que estaba limitando el número de lineas a 30, eliminando la más antigua con cada inserción. Por eso a partir de la aparición de la número 30, las lineas se mueven.

He cambiado el límite y lo he puesto a 1000, que servirá para que se vea mejor como funciona esta técnica. Esto es para evitar que el navegador termine consumiendo mucha memoria, aunque creo que exagero un poco... :P

» respuesta

Jajaja
Eso ha sido toda una vacilada por tu parte ;)

» respuesta

Como se puede eliminar el incómodo refresco de pantalla cuando no tienes el scroll abajo? (firefox)
En explorer se puede apreciar el refresco haciendo una selección de texto sin soltar el botón del ratón, además en ambos la selección se formatea al gusto del navegador:
exp->al soltar el botón del ratón y refrescar, automáticamente la selección coge todo el texto impreso
ff->tanto si sueltas el botón como sino, al refrescar se borra la selección

¿Se podria evitar esto manteniendo la selección hecha por el usuario?

Saludos

» respuesta