How to keep the scroll position of div stable on load content - php

Question

I have a div (inbox-chat) which contains data retrieved from database using ajax. the content is refreched every 5 seconds.
the div have a scroll bar. the problem here is when the div is refreshed to load new data, the scroll bar goes to top, and then the user cannot read what is written on the bottom of the div content.
the content is loaded here
messages.php
<div id="inbox">
<img src="assets/images/loaders/preload.gif" class="loading_inbox" >
</div>
here is an example of HTML code
ajax/inbox.php (EIDTED)
<?php
ob_start();
session_start();
require_once '../../config/connect.php';
require_once '../../functions/func.php';
$uid = $_GET['sender_id'];
$uid = get_username_id($_GET['sender_id']);
$stmt = $PDO->prepare("SELECT * FROM `forum_inbox`
WHERE
(sender_id=? AND receiver_id=?)
OR
(sender_id=? AND receiver_id=?)
ORDER BY dateMsg DESC");
$stmt->execute(array($uid, $_SESSION['id_userf'], $_SESSION['id_userf'], $uid));
$messages = $stmt->fetchAll(PDO::FETCH_OBJ);
?>
<?php if($stmt->rowCount() != 0): // STARTS CHECK IF ANY RECORDS EXISTS IN INBOX TABLE ?>
<div id="inbox-chat">
<section class="chat-container">
<ol class="chat-box">
<div class="new-msg"></div>
<?php
foreach($messages AS $msg):
if(get_username($msg->sender_id) == $_SESSION['usernamef']){
$direction = 'another';
}else{
$direction = 'me';
}
?>
<li class="<?php echo $direction ?>">
<div class="avatar-icon">
<a title="Voir profil de <?php echo get_username($msg->sender_id); ?>" href="profil.php?user=<?php echo get_username($msg->sender_id) ?>&pane=profile">
<img src="assets/images/profiles/<?php echo get_user_profile_pic($msg->sender_id)?>">
</a>
</div>
<div class="messages">
<p><?php echo $msg->message ?></p>
<time datetime="<?php echo convert_date_format_full(convert_timestamp($msg->dateMsg));?>">
<?php echo time_stamp($msg->dateMsg);?>
<i class="fa fa-clock-o"></i> <?php echo convert_date_format_full(convert_timestamp($msg->dateMsg)); ?>
</time>
</div>
</li>
<?php endforeach; ?>
</ol>
</section>
</div>
<?php else: ?>
<div class="panel-body" style="width:50%; margin:5px auto;text-align:center;">
<div class="media v-middle">
<h2>Pas de message</h2>
<img src="assets/images/no-msg.png">
</div>
</div>
<?php endif; // ENDS CHECK IF ANY RECORDS EXISTS IN INBOX TABLE ?>
js file (inbox.js)
$(document).ready(function(){
var sender_id = $(".u").val();
var $container = $("#inbox");
$.ajax({
url : 'ajax/inbox.php',
data : 'sender_id='+sender_id,
before : function(){
$(".loading_inbox").show();
},
success : function(data){
$(".loading_inbox").hide();
$("#inbox").html(data);
}
});
var refreshId = setInterval(function()
{
$container.load('ajax/inbox.php?sender_id='+sender_id);
}, 10000);
});
Im using this css for the inbox-chat class
#inbox-chat .chat-container {
width: 100%;
margin: 10px auto;
height: 450px;
background-color: #FAFCFB;
}
#inbox-chat .chat-box {
list-style: none;
background: #fdfdfd;
margin: 0;
padding: 0 0 50px 0;
height: 100%;
overflow-y: auto;
}
#inbox-chat .chat-box li {
padding: 0.5rem;
overflow: hidden;
display: flex;
}
#inbox-chat .chat-box .avatar-icon {
width: 50px;
position: relative;
}
#inbox-chat .chat-box .avatar-icon img {
display: block;
width: 100%;
background-color:#fff;
padding: 3px;
border-radius:50%;
}
#inbox-chat .me {
justify-content: flex-end;
align-items: flex-end;
}
#inbox-chat .me .messages {
order: 1;
border-bottom-right-radius: 0;
}
#inbox-chat .me .avatar-icon {
order: 2;
}
#inbox-chat .messages {
background: white;
padding: 10px;
border-radius: 2px;
width: 80%;
border: 1px solid #c9cccd;
color:#424242;
}
#inbox-chat .messages p {
font-size: 13px;
margin: 0 0 0.2rem 0;
}
#inbox-chat .messages time {
font-size: 0.7rem;
color: #ccc;
}
Take a look at the div from here
http://jsfiddle.net/devstar/rgjfqsb2/

Answer 1

That's because you're replacing the entire content of your inbox element with $("#inbox").html(data);.
Before replacing, save the scroll position with var scroll=$("#inbox")[0].scrollTop; and after replacing, restore it with $("#inbox")[0].scrollTop=scroll;.
I don't know if you're ajaxing the entire message history or only maybe the 10 newest and if newer messages are at the end or at the beginning - but you may need to calculate heights of the new elements and add/substract it to/from the scroll value.
Edit:
Btw, why are you ajaxing all the messages every 5 seconds, and not just the new ones and append or prepend them next to the existing messages? This would eliminate the need for storing and restoring the scroll position.
Add message id to each of your messages and a class to select them with:
<li class="message me" data-messageid="65">
<div class="avatar-icon">
<img src="http://simpleicon.com/wp-content/uploads/user1.png">
</div>
<div class="messages">
<p>Hi buddy !</p>
</div>
</li>
Then select the newest message and send that to your php handler:
var sender_id = $(".u").val();
var newest_msg=$(".message:last").data("messageid");
$.ajax({
url : 'ajax/inbox.php',
data : {
sender_id: sender_id,
newest_msg: newest_msg
},
success : function(data){
$("#inbox").append(data); //append it, not replace
}
});
And in your PHP:
$uid = $_GET['sender_id'];
$uid = get_username_id($_GET['sender_id']);
$newest_msg = $_GET['newest_msg'];
$stmt = $PDO->prepare("SELECT * FROM `forum_inbox`
WHERE
(sender_id=? AND receiver_id=?)
OR
(sender_id=? AND receiver_id=?)
AND
message_id > {$newest_msg}
ORDER BY dateMsg DESC
");
Notice I select only messages with id's greater than the newest message.

Answer 2

something like this?
var refreshId = setInterval(function()
{
$container.load('ajax/inbox.php?sender_id='+sender_id);
$(".chat-box").css("height", "auto");
var height = $(".chat-box").height();
$(".chat-box").css("height", 450);
$(".chat-box").scrollTop(height);
}, 10000);
replace this function.