javascript - 如何滚动到要附加数据的动态 ul 的底部 [在代码中使用 jquery、socket.io]

标签 javascript jquery html node.js 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);

关于javascript - 如何滚动到要附加数据的动态 ul 的底部 [在代码中使用 jquery、socket.io],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44306899/

相关文章:

html - Div 不清除 float

javascript - 短路逻辑中的 && 与 if 子句中的 && 相同吗?

javascript - Zepto 通过 .data() 支持 data-* 属性

javascript - FullCalendar 获取多日事件的点击日期

javascript - 如何解决 Edge 和 chrome 中获取不同时区名称的问题

javascript - 在 jQuery/Javascript 中生成复杂的 HTML 元素

javascript - 强制整个网站使用一种字体系列

javascript - Python - 如何找到圆的 x 和 y 坐标以在 map 上创建圆弧

javascript - 使用javascript获取文本选择,然后修改文本

javascript - 使用纯 Javascript 设置最小高度属性