Javascript 如何滚动到动态ul的底部,并向其添加数据[在代码中使用jquery、socket.io]
我已经尝试了各种失败的方法,通过其他类似的问题来解决这些问题。希望你们能帮助我。在socket接收事件的部分,我需要帮助。如果您需要我提供更多详细信息,请发表评论Javascript 如何滚动到动态ul的底部,并向其添加数据[在代码中使用jquery、socket.io],javascript,jquery,html,node.js,socket.io,Javascript,Jquery,Html,Node.js,Socket.io,我已经尝试了各种失败的方法,通过其他类似的问题来解决这些问题。希望你们能帮助我。在socket接收事件的部分,我需要帮助。如果您需要我提供更多详细信息,请发表评论 <body> <ul id="messages"></ul> <form id="sendform" action=""> <input id="m" autocomplete="on" /><button>Send</but
<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>
如果消息是DOM中可滚动的区域,则可以尝试此操作
$("#messages").animate({scrollTop: $('#messages').prop("scrollHeight")}, 1000);
用class=msg con将ul.messages包装在一个div中
<div class="msg-con">
<ul class="messages">
<li>messages</li>
</ul>
</div>
希望这能起作用……麻烦您进一步解释代码好吗?scrolltop如何理解我的ul的底部在哪里?是$'messages'。propscrollHeight部分是计算的地方,scrollHeight是垂直可滚动维度。
socket.on('chat message',function(){
var msgDiv = document.getElementById('msg-con');
msgDiv.scrollTop = msgDiv.scrollHeight;
});