2

Tengo un problema con el scroll de mi chatroom El scrollHeight todo el tiempo se queda abajo y no se mueve para ver los mensajes de arriba

  • lo que quiero hacer que se mueva la voluta del user para que pueda ver todos los mensajes del chat y se quede donde el user quiere si alguien me puede ayudar se lo agradezco

-Si necesitan todos los archivo díganme...

//tiempo real del chat 1000 es un segundo 
setInterval("mostrar_enviado()",500);
mostrar_enviado();

//aqui nos deja ver el chat

    function mostrar_enviado(){

        var parametros = {
            "pconsulta" : "mostrar_mensajes",
        }       

        $.ajax({
            data: parametros,
            url: 'valida_ajax.php?v=<?php echo $id; ?>',
            type: 'POST',
            befforesed: function(){
            },
            success: function (response){
                document.getElementById("mostrar_mensaje").innerHTML=response;
                var abajo=$("#mostrar_mensaje").prop("scrollHeight");
                $("#mostrar_mensaje").scrollTop(abajo)              
            }
        });     

    }

1 respuesta 1

1

Si he entendido bien la descripción, el problema es que no puedes subir en el chat y ver los mensajes anteriores. Eso se puede deber a cómo funciona el JavaScript:

  • La función mostrar_enviado() se llama cada 500 milisegundos (2 veces por segundo)
  • En la función mostrar_enviado() se realiza una llamada AJAX y cuando se recibe la respuesta de la petición:
    1. Se escribe el texto devuelto
    2. Se calcula la altura del contenedor del texto
    3. Se hace scroll hasta la parte baja del contenedor

Como poco va a haber un problema (que se pueda ver en el código de arriba): 2 veces cada segundo se hace scroll hasta la parte baja del chat, lo que va a hacer que aunque intentes subir, no se realice esa acción porque programaticamente se baja.

Una solución para evitar que ocurra esto sería devolver algo más que el texto del chat, por ejemplo JSON con el texto del chat y un timestamp con la fecha y hora del último mensaje. Entonces sólo se haría scroll a abajo si hay contenido nuevo (lo que permitiría hacer scroll hacia arriba porque el JS no desharía el scroll que haga el usuario).

Por ejemplo, si lo que se devolviese en la llamada AJAX fuese algo como esto:

{
  "ultimoMensaje": 1486605917,
  "conversacion": "...."
}

Entonces en el success tendrías que añadir una condición:

....
success: function (response){
    if (response.ultimoMensaje > ultimoMensajeMostrado) {
        ultimoMensajeMostrado = response.ultimoMensaje;
        document.getElementById("mostrar_mensaje").innerHTML = response.conversacion;
        var abajo=$("#mostrar_mensaje").prop("scrollHeight");
        $("#mostrar_mensaje").scrollTop(abajo);
    }
}
....
3
  • si pero como hago esto porque e hecho cálculos del height y se queda arriba con este codigo jsfiddle.net/eP24K/2 me puedes ayudar con es que tengo 1 mes con eso y no se como si quieres todos los archivos dime
    – Shareiv
    Commented el 9 feb. 2017 a las 2:23
  • El JSFiddle que compartes es algo diferente al código que compartes en la pregunta. El problema está en la condición: scrollPosition+$("#chat").height() === scrollHeight. Debería ser scrollPosition+$("#chat").height() <= scrollHeight con un <= en lugar del === (que hace que se haga scroll abajo sólo si ya se está abajo). Lo puedes ver funcionando como quieres en esta actualización: jsfiddle.net/eP24K/34
    – Alvaro Montoro
    Commented el 9 feb. 2017 a las 2:32
  • imgur.com/evV8t3N listo hize lo que me dijistes ahora no se actualiza no mostar los mensajes pero el navegador sigue actualizando
    – Shareiv
    Commented el 9 feb. 2017 a las 2:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.