Я разобрался с ответом на мою проблему благодаря этим ссылкам jsfiddle
jsfiddle
http://jsfiddle.net/KGfG2/
другой JS Fiddle
http://jsfiddle.net/5ucD3/13/
JQuery
$(document).ready(function(){
$('.allMessages').scrollTop($('.allMessages')[0].scrollHeight);
$("#send").on('click',function(){
var receiver = $('#messages span[name=receiver]').text();
var sender = getCookie('Username');
var message = $('#messages').find('input[name=message]').val();
$.post("../Admin/Users/sendmessage.php", {
receiver: receiver,
sender: sender,
message: message
},
function() {
var html = '<div id="messages2" class="messageDisplay">'+message+'</div>';
$("#allMessages").append(html);
$('#allMessages').animate({scrollTop: $('#allMessages').prop("scrollHeight")}, -100);
});
})
})
1012 * CSS *
.messageBox {
margin-left: -83.5%;
top: -35px;
position: relative;
}
.allMessages{
width: 97%;
overflow-x: auto;
height: 79%;
}
.messagePersonBox{
width: 14%;
overflow-x: auto;
height: 37%;
background-color: white;
display: block;
box-shadow: 5px 10px #888888;
position: fixed;
left: 74%;
bottom: 0;
border-radius: 25px;
}
.shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.messageSend{
margin-left: 12.9%;
cursor: pointer;
position: fixed;
bottom: 15px;
}
.usersname {
position: absolute;
margin-left: 11%;
margin-top: 1px;
}
.messageType{
border-radius: 25px;
padding: 7px 8px;
bottom: 12px;
position: fixed;
margin-left: 41px;
}
.messageDisplay {
position: relative;
margin-left: 40%;
top: 58%;
margin-bottom: 10px;
width: 132px;
background-color: lightblue;
border-radius: 25px;
padding: 1px 14px;
}
код php / html
echo '<div id="messages" class="messagePersonBox shadow">
<span class="usersname" name="receiver"> '.$Username.'</span>
<hr style="margin-top:22px">
<div id="allMessages"class="allMessages">
';
$sql2 = "SELECT * FROM messages WHERE Sender = '$Myself'";
$result2 = $conn->query($sql2);
// output data of each row
while($row = $result->fetch_assoc()) {
if($result2->num_rows > 0) {
if($row = $result2->fetch_assoc()) {
$Sender = $row['Sender'];
$Message = $row['Message'];
$Receiver = $row['Receiver'];
}
}
// to get total messages
$totalmessages = mysqli_num_rows($result);
echo '<div id="messages2" class="messageDisplay">'.$Message.'</div>';
}
// Typing part of message
echo '</div>
<input type="text" id="messagetosend" name="message" class="messagetype" placeholder="Type a message..."><span id="send" class="messageSend">↩</span>
</div>
';
помогло то, что прокрутка была установлена автоматически внизу, а затем, когда добавляется новый элемент, я анимировал его и содержимое с высотой прокрутки, как говорил @ControlAltDel, но я перевернул его так, чтобы он работал вверх, а не вниз, делая значение отрицательным.