0

mi problema es que el scroll se queda en los mensajes que ya pasador y no baja cuando hay un nuevo mensaje los que quiero es controlar el scroll asi como el de facebook si alguen sabe como hacer eso porfavor que me diga Gracias.

introducir la descripción de la imagen aquí

 <script type="text/javascript">



//esto envia los mensages a la base de datos 


        $(document).ready(function() {

            //method to trigger when user hits enter key
            $("#mensaje").keypress(function(evt) {
                if(evt.which == 13) {

                        //send data to "shout.php" using jQuery $.post()
                         enviar_insert();
                    }

            });
        }); 

    function enviar_insert(){
        var mensaje = document.getElementById("mensaje").value;

        var paramentros = {
                "mmensaje" : mensaje,
                "pconsulta" : "consulta",
        };


        $.ajax({
            data: paramentros,
            url: 'submit_chat.php?v=<?php echo $id; ?>',
            type: 'POST',
            success: function(response) { 

        }
        });
        limpiar_datos();
    }

/////aqui se eliminan los datos 

        function enviar_DELETE(){
        var mensaje = document.getElementById("mensaje").value;
        var paramentros = {
                "mmensaje" : mensaje,
                "pconsulta" : "DELETE",
        };
        $.ajax({
            data: paramentros,
            url: 'submit_chat.php?v=<?php echo $id; ?>',
            type: 'POST',
        });
        limpiar_datos();
    }




//tiempo real del chat 1000 es un segundo 
//aqui nos deja ver el chat 
function mostrar_enviado() {
            var parametros = {
            "pconsulta" : "mostrar_mensajes",
        }   


    $.ajax({
        data: parametros,
        url: 'submit_chat.php?v=<?php echo $id; ?>',
        success: function(data) {
            $('#mostrar_mensaje').html(data);

                var abajo=$("#mostrar_mensaje").prop("scrollHeight");
                $("#mostrar_mensaje").scrollTop(abajo)  

             setTimeout(function(){//time real
                    mostrar_enviado();
            }, (Math.floor(Math.random()*1000)))


        },

    });
}   
mostrar_enviado();


//limpia la caja de los mensages    

function limpiar_datos(){
    document.getElementById("mensaje").value="";
}

</script>
2
  • No entendí nada de tu comentario. Si desea algo diferente, por favor, editar y ser más específico en su pregunta
    – Chun
    Commented el 20 mar. 2017 a las 13:21
  • @Cʜᴜɴ Ese comentario debería ir en la respuesta, no en la pregunta.
    – user13558
    Commented el 20 mar. 2017 a las 14:05

3 respuestas 3

4

@Shareiv He creado un ejemplo de un concepto sobre cómo puedes abordar esto:

$(document).on('DOMNodeInserted', function(e) {
    if ( $(e.target).hasClass('nueva_msg') ) {
        var $newMessage = $('#newMessageAnchor'),
            $msgContainer = $('.messageContainer'),
            $newMessage = $newMessage.position().top + $msgContainer.scrollTop();
        $msgContainer.animate({scrollTop: $newMessage}, 1000);
    }
});

// El código abajo no importa realmente
var addMsgItem = setInterval(function(){
    var numItems = $('.nueva_msg').length;
    $('.nueva_msg').last().after('<div class="nueva_msg">Nueva mensaje!</div>');
    if ( numItems >= 6) {
        clearInterval(addMsgItem);
    }
}, 2000);
.messageContainer {
    height: 90vh;
    width: 50vw;
    overflow: auto;
}
.nueva_msg {
    height: 50px;
    padding: 10px;
    margin-bottom: 50px;
    border: 1px solid #c1c1c1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="messageContainer">
    <div class="nueva_msg">último mensaje</div>
    <div class="nueva_msg">otra mensaje</div>
    <div id="newMessageAnchor"></div>
</div>

4
  • 1
    Genial tu respuesta :-) Commented el 9 mar. 2017 a las 23:18
  • 1
    Gracias @CristinaCarrascoAngulo :) Pero parece que el OP no da retroalimentación :(
    – Chun
    Commented el 9 mar. 2017 a las 23:28
  • 1
    tal vez esta ocupado... :-) esperemos que lo haga Commented el 9 mar. 2017 a las 23:49
  • EL SCROLL HIJO DE SU CODE XD sigue igual mi codigo actualiza con un ID que envia a un file.php y el after no me funciona porque tengo rebisar los datos para ver si es una imagen o nota de audio y ni hablar del SPAM o el hashtag por eso el scroll no lo puedo controlar y ya para hacabar si estaba ocubado con el sistema de amigos
    – Shareiv
    Commented el 10 mar. 2017 a las 3:05
1

no agrego comentario debido a que no lo tengo permitido aun, aun así necesitaríamos que muestres el código fuente para poder resolver tu problema, por ahora te recomiendo que a tu scroll le agregue el estilo position:

static-bottom o fixed-bottom
2
  • como hago eso position JS no es mi fuerte el codigo ya lo pungo
    – Shareiv
    Commented el 22 feb. 2017 a las 21:27
  • si aun quieres el codigo dime amig¿? si
    – Shareiv
    Commented el 10 mar. 2017 a las 3:08
1

Podrías enviar el scroll al final de la pagina cuando hayas recuperado el nuevo elemento. De esta forma

window.scrollTo(0,document.body.scrollHeight);

Espero te sirva

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