如何滚动到一个动态UL的底部，我将数据附加到该数据[使用jquery，socket.io中的代码中]

我已经通过其他类似问题尝试了各种失败方法。希望你们能帮助我。我需要在插座接收事件的部分中的帮助。如果您需要我的更多详细信息

，请发表评论

  <body>
    <ul id="messages"></ul>
    <form id="sendform" action="">
      <input id="m" autocomplete="on" /><button>Send</button>
    </form>
        <script src="/socket.io/socket.io.js"></script>
        <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
        <script>
            $(function(){
                var socket = io();
    //          var ready = false;
                var nick;
                while(nick=='' || nick==null)
                    nick = prompt('Enter nick : ');
                socket.emit("join", nick);
                $('#m').focus();
            $("#sendform").submit(function(){
                    if($('#m').val()=='')
                        return false;
              socket.emit('chat message',$('#m').val());
                    $('#m').val('');
              return false;
            });
                socket.on("update",function(msg){
                    $('#messages').append('<li id="update" >'+ msg);
                });
                socket.on('chat message', function(nick,msg){
                    $('#messages').append("<li> <strong>" + nick + "</strong> : " + msg)  ;
                        $('ul, html').css("scrollTop", $("#messages li:last").offset().top);
                });
            });
        </script>

您可以尝试一下，前提是#messages是DOM中的滚动区域。

$("#messages").animate({scrollTop: $('#messages').prop("scrollHeight")}, 1000);

用class =" msg-con"将ul.message包裹在div中

<div class="msg-con">
 <ul class="messages">
  <li>messages</li>
</ul>
</div>

现在添加JavaScript

socket.on('chat message',function(){
var msgDiv = document.getElementById('msg-con');
        msgDiv.scrollTop = msgDiv.scrollHeight;
});

希望这有效...

相关内容

最新更新

热门标签：