Tengo un div que contiene una lista de mensajes (es una aplicación de sala de chat). A medida que cada mensaje se agrega al final de la lista, I pensar Quiero que el div se desplace hacia la parte inferior de la página. Eso tiene sentido, ¿verdad? Entonces, preguntas # 1: ¿cómo consigo que el div se desplace hacia abajo?
Ahora, la siguiente pregunta es un poco sobre usabilidad. ¿Qué sucede si el usuario se desplaza hacia arriba para leer algo que se publicó anteriormente? Entonces, de repente, alguien publica un nuevo mensaje? Eso significa que jQuery se desplazará hacia abajo nuevamente. Esto puede ser muy irritante para el usuario. ¿Cuál es una buena manera de manejar esto? ¿Debería desplazarse solo hacia abajo si la barra de desplazamiento ya está desplazada hacia abajo antes de agregar un nuevo mensaje? Si es así, ¿cómo hacerlo en jQuery? ¿O hay una solución más útil?
Respuestas
2 para la respuesta № 1puedes obtener la posición de la barra de desplazamiento window.pageYOffset y luego usa window.scrollTo(0, y) para desplazarse a algún lugar.
o incluso puedes usar $("#mydiv").scrollTop(newmsg_top) en jquery para desplazarse hacia abajo hasta el nuevo mensaje.
dónde var newmsg_top = parseInt($("#mydiv li:last").offset().top);
aquí #mydiv es el div con todos tus mensajes.
asi que #mydiv li:last apunta al último mensaje.
offset() devuelve la posición actual del elemento con respecto al documento y puede obtener la posición superior al .top
Si desea la posición relativa con respecto al padre, puede ir con position()
EDITAR: Tengo un jsfiddle trabajando aquí aquí. Por favor echa un vistazo.</ strong> Nota: Baja solo si está viendo el último elemento (para la solución de su problema de usabilidad)
1 para la respuesta № 2
// esto se desplazará hasta el final, después de agregar
$("#mydiv").append("My data");
var newmsg_top = parseInt($("#mydiv")[0].scrollHeight );
$("#mydiv").scrollTop(newmsg_top);