jQuery DIV AutoScroll after ajax load

Question

I have a simple chat application on a web page, i have an issue when trying to autoscroll the div only when the scroll bar is at the bottom.

I've tried this:

$("#line").load("x.php");
   var d = $('#line');
   d.scrollTop(d.prop("scrollHeight"));
   var refreshId = setInterval(function(){
      var isEnd = $('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#line')[0].scrollHeight;
      $('#line').append('<p class="triangle-isosceles right"><img src="images/user-img.jpg" style="height: 30px;padding-right: 5px;"/><b>Douglas:</b> prueba<br><small>Fecha</small></p>');
      console.log(isEnd);
      if(isEnd){
       var scrolle = $("#line").prop("scrollHeight") - $('#line').height();
       $("div#line").scrollTop(scrolle)  ;
      }
    }, 1000);

So when doing this using the append function works great, the issue comes when instead of append i refresh the content of the div using load()

$("#line").load("x.php");
   var d = $('#line');
   d.scrollTop(d.prop("scrollHeight"));
   var refreshId = setInterval(function(){
      var isEnd = $('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#line')[0].scrollHeight;
      $("#line").load('ajax/x.php');
      console.log(isEnd);
      if(isEnd){
       var scrolle = $("#line").prop("scrollHeight") - $('#line').height();
       $("div#line").scrollTop(scrolle)  ;
      }
    }, 1000);

This seems to break the autoscroll because the div is not autoscrolling on new messages.

Appreciate your help

Answer 1

Finally i achieved my goal by doing this:

var scrolled = false;
    $(window).load(function() {
       $("#line").load("x.php");
       var d = $('#line');
       d.scrollTop(d.prop("scrollHeight"));
       $("#line").on('scroll', function(){
            scrolled=true;
        });
       var refreshId = setInterval(function(){     
            $("#line").load('x.php');
          if($('#line')[0].offsetHeight + $('#line')[0].scrollTop == $('#linea')[0].scrollHeight){
              scrolled=false;
          }

          updateScroll();
        }, 1000);
    });

    function updateScroll(){
        if(!scrolled){
            $("#linea").scrollTop($("#linea").prop("scrollHeight"));
        }
    }

I define a var named scrolled and set it to false (the user didn't scroll the div), after that i load the conversations on the div #line, then automatically scroll to bottom of that div to show the last messages, add a listener to the scroll event, in case the user scroll the div then i set scrolled to true so the div do not scroll automatically.

Do the refresh of the div element every second and check if the current scroll position is equal to the height of the div, if so then set the scrolled to false.

After that i run a function called updateScroll to scroll to the bottom if the scrolled var is false.