I have a div class='messages'. I add date to this div via jQuery.append() Here are the styles:
.messages {
border: 1px solid #dddddd;
padding:10px;
height: 400px;
overflow-x:visible;
overflow-y: scroll;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom:10px;
font-size:14px;
}
For autoscroll I use such function:
receiveMessage = function (name, message, type) {
//adding new message
$("#messages").append('<strong>' + name + ": " + '</strong>' + message + '<br>');
/autoscrolling to the bottom
$("#messages").animate({
scrollTop: $("#messages").height()
}, 300);
}
About ~20 messages are scrolling normally, but after it 'hangs', new messages are not scrolled. Chrome Version 19.0.1084.56 . What I'm doing wrong? Thanks!
Change
scrollTop: $("#messages").height()
to
scrollTop: $("#messages").scrollHeight
This solution did not work for me, however, the following did...
$(document).ready(function(){
$('#chat-scroll').animate({
scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000);
});
Please try:
$(document).ready(function(){
$('#chat-scroll').animate({scrollTop: $('#chat-scroll')[0].scrollHeight}, 2000);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.