I am working on auto scrolling of chat application, which is like that whenever I go for a conversation to someone then the conversation page automatically scroll down and when I send a message the scroller automatically again scroll down on each send-receive message. Using this script I achieve my goal
$(document).ready(function() {
setInterval(function() {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>').scrollTop($("#messagepost").prop('scrollHeight'))
}, 1000);
});
But problem is that when I scroll up it is not scrolling up normally, means it is not fixing on its upper position it goes to down automatically.
I want it to work normally when I scroll up or down beside auto-scrolling on each send message and on refreshing a page.
After searching its solution, I have implemented this script (in place of above)-
var scrollpos = $("#messagepost").scrollTop();
var scrollpos = parseInt(scrollpos) + 520;
var scrollHeight = $("#messagepost").prop('scrollHeight');
if(scrollpos < scrollHeight)
{
$(document).ready(function() {
setInterval(function () {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>')
}, 1000);
});
}
else
{
$(document).ready(function() {
setInterval(function () {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>').scrollTop($("#messagepost").prop('scrollHeight'))
}, 1000);});
}
But after applying it, the functionality of auto scrolling has gone.
After spending a lot of time, I got a solution and it is working for me.
<script type="text/javascript">
$("#messagepost").scrollTop($("#messagepost").prop('scrollHeight'));
$(document).ready(function()
{
function updateChat(){
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>');
}
var chat = $("#messagepost").html();
setInterval(function () {
updateChat();
if(chat !== $("#messagepost").html()){
$("#messagepost").scrollTop($("#messagepost").prop("scrollHeight"));
chat = $("#messagepost").html();
}
}, 1000);});
</script>
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.