How to enable and disable automatic scroll in a chat?

Asked

Viewed 460 times

4

I am having doubts in the implementation of this resource.

I have a link that does this action, like enable and disable the automatic scroll.

For better understanding, visit JSFIDDLE below:

EXAMPLE IN JSFIDDLE

javascript jquery rolling chat
  • 1

    Why don’t you use the data of jQuery? so you can do something like <div id="list_msg" data-scroll-habilitado="false">. Then you make a if. If true, you do $("#list_msg").scrollTop($("#list_msg").prop('scrollHeight'))

  • Good @Wallacemaxters, had not thought of it.

1 answer

4


To make the automatic scroll change, you can do as follows:

$(document).ready(function(){
    var msg = $("#msg");

    $("#send_msg").click(function(){
        if(msg.val().length >= 1){
            $("#list_msg").append("<li>"+msg.val()+"</li>")
            msg.val("").focus();
        }

       // verifica se o scroll automático está habilitado (atualmente)

        if ($("#list_msg").data('scroll-habilitado') === true) {
              var scrollHeight = $("#list_msg").prop('scrollHeight');
              $("#list_msg").scrollTop(scrollHeight);
        }
    })

    $("#scroll_enable_disable").click(function(){
        var currentStatus = $("#list_msg").data('scroll-habilitado');
       // faz o toggle de status
       $("#list_msg").data('scroll-habilitado', !currentStatus);
    })
})

And by default, you can define whether it will come enabled or not, as follows:

<ul id="list_msg" data-scroll-habilitado="true"></ul>

And as an example was asked in Jsfiddle, here it goes:

http://jsfiddle.net/tzr5fz8b/3/

  • I just forgot to leave the text exchange as it was before. But you’ll forgive me for this ;)

  • Very good @Wallacemaxters! Thank you, that’s exactly what I need.

  • 2

    http://jsfiddle.net/tzr5fz8b/4/ With correct texts :)

Browser other questions tagged javascript jquery rolling chat

You are not signed in. Login or sign up in order to post.