我最近开发了一个在线聊天室.我有一切工作和安全,但我希望存储消息的div自动滚动到底部.我设法用这个Javascript做到了:
window.setInterval(function() {
var elem = document.getElementById('messages');
elem.scrollTop = elem.scrollHeight;
}, 100);
Run Code Online (Sandbox Code Playgroud)
但是有了这个,用户根本无法向上滚动,它总是将它们推回到div的底部.我想要发生的是,如果用户已经在div的底部,那么当出现新消息时,它会将它们滚动到div的底部.但是如果用户不在div的底部,则将它们单独留下直到它们滚动到底部.
这是更新div的jQuery:
window.onload = function(){
setInterval(function(){
$.ajax({
url: "get.php",
type: "GET",
success: function(output){
$("div#messages").html("<p>" + output + "</p>");
}
});
}, 500);
}
Run Code Online (Sandbox Code Playgroud)
然后div本身从一开始就是空的: <div id="messages"></div>
如果需要,这是CSS:
#messages {
width: 700px;
height: 250px;
border: 2px solid black;
overflow: auto;
-moz-border-radius: 15px;
border-radius: 15px;
}
Run Code Online (Sandbox Code Playgroud)
jQuery和Javascript都适用于此,我不限于使用其中一个.