gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:48:14 26 4
gpt4 key购买 nike

我通过其他类似的问题尝试了各种失败的方法。希望大家能帮助我。我在套接字接收事件的部分需要帮助。如果您需要我提供更多详细信息,请发表评论

  <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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com