Estoy tratando de desplazarme hasta la parte inferior de un div #chat-feed con desbordamiento configurado en automático y permanecer allí a menos que un usuario desplace el contenido de ese div hacia arriba. Si se desplazan hacia abajo, el div debería bloquearse en la parte inferior y el nuevo contenido se mostrará en la parte inferior.
Problemas conocidos: he intentado implementar esta respuesta con mi código, pero aún no conozco Javascript lo suficientemente bien como para que funcione. Si el contenido de chat-feed.php es más alto que el contenedor, el pergamino permanece en la parte superior. También parece que la respuesta dada no respeta el contenido cargado desde un archivo externo.
Cosas clave: el nuevo contenido debe mostrarse en la parte inferior y el div debe desplazarse hacia abajo cuando se carga el nuevo contenido A MENOS QUE los usuarios ya se hayan desplazado un poco hacia arriba. Si el usuario se desplaza hacia abajo, debería bloquearse en la parte inferior y el nuevo contenido se mostrará en la parte inferior y será visible.
<div id="chat-feed" style="height: 200px; width: 300px; overflow: auto;"></div> <script> $(document).ready(function(){ setInterval(function(){ $('#chat-feed').load("chat-feed.php").fadeIn("slow"); }, 1000); }); </script>En la pregunta a la que se vinculó, hay una mejor implementación https://stackoverflow.com/a/21067431/1544886 .
He reelaborado el código de ese autor a continuación:
$(document).ready(function() { var out = document.getElementById("chat-feed"); // outer container of messages var c = 0; // used only to make the fake messages different // generate some chatter every second setInterval(function() { //check current scroll position BEFORE message is appended to the container var isScrolledToBottom = checkIfScrolledBottom(); // append new mesage here $('#chat-feed').append("<div>Some new chat..." + c++ + "</div>").fadeIn("slow"); // scroll to bottom if scroll position had been at bottom prior scrollToBottom(isScrolledToBottom); }, 1000); function checkIfScrolledBottom() { // allow for 1px inaccuracy by adding 1 return out.scrollHeight - out.clientHeight <= out.scrollTop + 1; } function scrollToBottom(scrollDown) { if (scrollDown) out.scrollTop = out.scrollHeight - out.clientHeight; } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="chat-feed" style="height: 150px; width: 300px; overflow: auto;"></div>ACTUALIZAR
La función .load() de JQuery elimina el elemento asociado ( chat-feed ) y lo vuelve a agregar. Esto significa que la variable out apunta al antiguo elemento eliminado, no al nuevo. La solución es actualizar la variable de out después de ejecutar un .load() :
$('#chat-feed').load("chat-feed.php").fadeIn("slow"); out = document.getElementById("chat-feed"); // outer container of messages