only scroll to bottom if user not scrolling

Question

I find myself getting frustrated with JS yet again! please help!

below is some code I am using for a simple chat app, that refreshes the content from a text file via an AJAX request. At the same time it scrolls to the bottom of the window. I want it so if the user scrolls up to catch up it doesnt keep interupting this behavour by sending them down to the bottom when it refreshes. How could I do this.

<script>

$(function() {
  startRefresh();  
});
function startRefresh() {
    setTimeout(startRefresh,3000);

    $.post('pollchat.php', function(data) {
         $('#content_div_id').html(data);
         var wtf    = $('#content_div_id');
         var height = wtf[0].scrollHeight;
         wtf.scrollTop(height); 
    });
}
</script>

Any help greatly appreciated.

before refreshing the content you need to fetch user's scroll position and after load set that scroll position — Parag Bhayani, Jul 01 '16 at 12:01
@user: See my answer and let me know whether it helps or not — Parag Bhayani, Jul 01 '16 at 12:27
Im afriad so, and I've had to move on, unfortunatly. I am builing framework for a chat system which need to have a scroll behaviour similar to that of something like facebook. Its a real shame, I will come back to it at some point and no doubt come back here :) Thank you all for your help though. — user3516183, Jul 12 '16 at 10:54
Possible duplicate of [Scrollable div to stick to bottom, when outer div changes in size](http://stackoverflow.com/questions/34213227/scrollable-div-to-stick-to-bottom-when-outer-div-changes-in-size) — Asons, Jul 13 '16 at 07:21

Parag Bhayani · Answer 1 · 2016-07-13T07:13:47.347

See How I have used current scroll position and counted that whether user has scrolled or not..

$(function() {
  startRefresh();
});

function startRefresh() {
  setTimeout(startRefresh, 1000);
  var wtf = $('#content_div_id');
  var currentScrollPos = wtf.scrollTop();
  var elementHeight = wtf[0].scrollHeight;
  var scroll = false;

  //User has scrolled, don't set scroll
  if (wtf.height() + currentScrollPos >= elementHeight) {
    scroll = true;
  }

  var data = $('#content_div_id').html();
  data += "Some Text<br/>";
  $('#content_div_id').html(data);

  if (scroll) {
    var height = wtf[0].scrollHeight;
    wtf.scrollTop(height);
  }
}

#content_div_id {
  max-height: 100px;
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content_div_id">
  Some Text
  <br/>Some Text
  <br/>Some Text
  <br/>Some Text
  <br/>
</div>

UPDATE: Try this code, you probably need to fix one or two things .. but have a look at the code and get an idea

$(function() {
  startRefresh();  
});
function startRefresh() {
    setTimeout(startRefresh,3000);

    $.post('pollchat.php', function(data) {
        var wtf = $('#content_div_id');
        var currentScrollPos = wtf.scrollTop();
        var elementHeight = wtf[0].scrollHeight;
        var scroll = false;

        //User has scrolled, don't set scroll
        if (wtf.height() + currentScrollPos >= elementHeight) {
            scroll = true;
        }

         $('#content_div_id').html(data);
         if (scroll) {
            var height = wtf[0].scrollHeight;
            wtf.scrollTop(height);
        }
    });
}

because you removed the function to pull the data, I cant seem to get it to work at all. Can you post a response with my post data ajax function? — user3516183, Jul 01 '16 at 17:09
It's not that tough if you understand the logic what I am doing... From var wtf == .... Copy the code and put it inside your Ajax callback, try it once, and let me know if you are not able to get it done.... — Parag Bhayani, Jul 01 '16 at 17:45

only scroll to bottom if user not scrolling

1 Answers1