[英]JQuery always scroll div to bottom (ajax data)
我有通过ajax自动获取消息的页面消息页面,但消息的包含div总是像往常一样滚动到顶部。 我希望它像任何其他消息传递应用程序一样自动滚动到位于 div 底部的最后一条消息。 正文不可滚动,因为它与客户端设备的高度相关联,但内部的其他 div 是可滚动的,目标 div 是带有 id 消息的 div。 我有一个插件调用者
<div class="chat-messages-body" id="chat-messages-body" style="display:flex; flex-direction: column-reverse;">
<div data-simplebar="init" id="chat-messages-body-init">
<div class="chat-messages-list" id="chat-messages-list">
<div id="messages">
<!-- loading chats -->
<div id="" style="padding-top:10%;">
<center class="text-primary rotate-infinite">
<img src="/images/loading_chats.png" width="35px;"></img>
</center>
<p class="text-center" style="color:#ff003c;">Loading...</p>
</div>
<!-- .loading chats -->
</div>
</div><!-- .chat-messages-list -->
</div><!-- SimpleBar INIT -->
</div><!-- .chat-messages-body -->
和我的 jquery 代码,它加载消息并滚动到按钮,但它不起作用
//jquery get messages, refresh every 5 seconds and scroll to messages bottom
window.setInterval(function(){
var id = $("#id").val(); //get transaction id
$(document).ready(function(){
$("#messages").load('/jsServerSide/messages.php', {id:id});
});
$('#messages').animate({
scrollTop: $('#messages').get(0).scrollHeight
}, 2000);
}, 5000);
这是我目前的身体固定高度代码
//Dont scroll page, use fixed 2000px height
$(document).ready(function() {
$('#chat-scroll').animate({
scrollTop: $('#chat-scroll').get(0).scrollHeight
}, 2000);
});
// .Dont scroll page, use fixed 2000px height
我使用这个插件来创建自定义滚动条SimpleBar
你可以试试这个。
$("#chat-scroll").animate({ scrollTop: $('#chat-scroll').prop("scrollHeight")}, 1000);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.