每次用户发送或接收新消息时，我都想保留滚动条。
<script>
$ = jQuery;
var currentID = null;
var chatTimer = null;
var scrolled;
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#chatbox").show();
$('#messages').html(data);
$("div.area").show();
if(!scrolled){
$('#messages').scrollTop($('#messages')[0].scrollHeight);
scrolled=true;
}
}
});
}
$(document).ready(function() {
fetch_data();
$(document).on('click', '.first_name', function() {
scrolled=false;
currentID = $(this).data("id1");
fetch_chat();
});
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
scrolled=false;
setInterval(function() {
fetch_chat();}, 500);
});
});
});
</script>
我想要的是，每当用户发送或接收新消息时，滚动条都应该到达底部，但它应该可以根据用户的需要滚动。 setinterval() 将滚动条向下滚动。 我想重复调用 fetch_chat() 而不是滚动条，我希望它位于底部:在开始时，在发送或接收新消息之后并且必须可以自由滚动。
最佳答案
以下答案的基本逻辑:
Compare the current chat HTML with the previous chat HTML, and if they are different, then scroll, if they are the same, then don't.
<script>
$ = jQuery;
var currentID = null,
chatTimer = null,
oldHtml = "";
function fetch_data() {
$.ajax({
url: "select.php",
method: "POST",
success: function(data) {
$('#live_data').html(data);
}
});
}
function fetch_chat() {
$.ajax({
url: "fetch_chat.php",
method: "POST",
data: {
id: currentID
},
dataType: "text",
success: function(data) {
$("#chatbox").show();
$('#messages').html(data);
$("div.area").show();
if (oldHtml !== data) {
$('#messages').scrollTop($('#messages')[0].scrollHeight);
}
oldHtml = data;
}
});
}
$(document).ready(function() {
fetch_data();
$(document).on('click', '.first_name', function() {
currentID = $(this).data("id1");
fetch_chat();
});
$("#sub").click(function() {
var text = $("#text").val();
$.post('insert_chat.php', {
id: currentID,
msg: text
}, function(data) {
$("#messages").append(data);
$("#text").val('');
setInterval(fetch_chat, 500);
});
});
});
</script>
关于javascript - 滚动条应该在没有 setInterval() 的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47363587/