拖动时自动向下滚动不会向上滚动

Question

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.

Answer 1

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>