Estoy trabajando en un módulo de chat. Estoy usando la función setInterval() para obtener el historial de chat.
Tengo una barra de desplazamiento (que se muestra después de la operación de envío/recepción) y luego, cada vez que obtengo un resultado de la base de datos a través de AJAX, la barra de desplazamiento debe permanecer en la misma posición, sin embargo, en este momento la barra de desplazamiento va a la parte superior de la mensajes
¿Cómo puedo manejar la respuesta AJAX y mantener la lista de mensajes en una posición específica?
var scrollTopPosition = $("div#chat_sc_in").scrollTop(); var scroll_l = $("div#chat_sc_in").scrollLeft(); alert('Height is ' + scrollTopPosition); alert('Width is ' + scroll_l); $.ajax({ type: 'POST', url: "<?php echo base_url('Welcome/user_chat_fetch'); ?>", data: '', success: function(html) { $('.user_chat_module').html(html); $('.user_chat_module').scrollTop(scrollTopPosition); } });El scrollTop permanecerá constante incluso después de que aumente la altura de div. La solución es rastrear la distancia entre scrollTop y la parte inferior del div cada vez que el usuario se desplaza y asignar la diferencia de la nueva altura y el valor calculado cuando se agrega contenido nuevo.
<script> var scrollDifference = 0; $("div#chat_sc_in").scroll(event => { scrollDifference = event.target.scrollHeight - event.target.scrollTop; }); $.ajax({ type:'POST', url:"<?php echo base_url('Welcome/user_chat_fetch'); ?>", data:'', success:function(html){ $('.user_chat_module').html(html); var divThatHasScrollBar = $("div#chat_sc_in")[0]; divThatHasScrollBar.scrollTop = divThatHasScrollBar.scrollHeight - scrollDifference; }}); </script>