jquery scroll bottom to top, prepand and ajax

Question

I need help creating a finite scroll bottom to top. Something like facebook messages.

I have checked this question but doesn't seem to work for me the way it supposed to. The problem is when I reach the top of the div and the end of the message list, it scrolls down and I can't see the the first few messages. How do I stop this from happening

And also, when new messages are prepended, the existing messages are pushed down, causing the user to lose their "viewing" place.

Here is what I have:

$(document).ready(function(){

$('#message_board').scrollTop($('#message_board')[0].scrollHeight);

});

$('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();
    if (scroll == 0) {
        // Store eference to first message
        var firstMsg = $('.bubble-left:first, .bubble-right:first');

        // Prepend new message here
        var content;
        $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){
            content= data;
            $('#message_board').prepend(content);
            });

        // After adding new message(s), set scroll to position of
        // what was the first message
        $('#message_board').scrollTop(firstMsg.offset().top);
    }
});

Mohamed-Yousef · Accepted Answer · 2015-11-26T16:03:53.340

2

your problem is here

$('#message_board').scrollTop(firstMsg.offset().top);

you can try this instead

$('#message_board').scrollTop(1);

or try to comment that line of code

 //$('#message_board').scrollTop(firstMsg.offset().top);

but I think you should use scrollTop after prepend()

$('#message_board').prepend(content).promise().done(function(){
     $(this).scrollTop(1);
});

finally .. add a specific class to the elements you want to prepend it and scrollTop the div to last element with this class name and after prepend() use removeClass() to remove this class again

$('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();
    if (scroll == 0) {
        $(this).prepend(content).promise().done(function(){
            $(this).scrollTop($('.newAppend:last').offset().top);
            $('.newAppend').removeClass('newAppend');
        });
    }
});

Demo here

Note: wrap all your code inside $(document).ready(function(){// all of your code here });

edited Nov 26 '15 at 16:03

answered Nov 26 '15 at 12:25

Mohamed-Yousef

23,946
3
19
28

This is working. But when content is prepended, the existing messages are pushed down... – Ikhlak S. Nov 26 '15 at 15:29
1

@user3284463 ok try to stop scrollTop after prepend I mean comment this line //$(this).scrollTop(1); – Mohamed-Yousef Nov 26 '15 at 15:32
@user3284463 I will make a demo just wait – Mohamed-Yousef Nov 26 '15 at 15:35
@user3284463 http://jsfiddle.net/mohamedyousef1980/qfe5xgjs/5/ .. updated answer – Mohamed-Yousef Nov 26 '15 at 15:59
I can't get it to work since my content is added dynamically. I tried `$(this).last().addClass('newAppend')` before `$(this).scrollTop($('.newAppend:last').offset().top);` – Ikhlak S. Nov 26 '15 at 17:13
@user3284463 not like that ... in php file when you echo the html .. echo it with a new class
– Mohamed-Yousef Nov 26 '15 at 17:16
Stills same problem...http://jsfiddle.net/kgkok2cw/2/ ...the html is added like this... I'm sure the last span class `newAppend` is removed. I checked through the browser developer tools. – Ikhlak S. Nov 26 '15 at 17:37

score 0 · Answer 2 · answered Nov 26 '15 at 12:33

Make sure to scroll after the message has been prepended.

The $.get accepts a callback which is executed once you get a response from the server.

You should move .scrollTop there as well, as you want to execute that function after you've prepended the content, inside the callback. As everything outside the callback will usually be executed before that callback.

Something like this:

$(document).ready(function(){
  $('#message_board').scrollTop($('#message_board')[0].scrollHeight);

  });

  $('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();

    if (scroll == 0) {
      // Store eference to first message
      var firstMsg = $('.bubble-left:first, .bubble-right:first');

      // Prepend new message here
      var content;

      $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){
        content= data;
        $('#message_board').prepend(content);

        // After adding new message(s), set scroll to position of
        // what was the first message
        $('#message_board').scrollTop(firstMsg.offset().top);
      });
    }
});

hmmm...when I use this code, when I reach the top it prepends and then scrolls to the bottom.... — Ikhlak S., Nov 26 '15 at 15:31

Ikhlak S. · Answer 3 · 2015-11-27T17:57:13.407

So, I finally figured it out. Something was stopping the $('#message_board').scrollTop(firstMsg.offset().top-curOffset); event. I tried .unbind and .off, it never work. So what I did is added that line to the success attribute of ajax.

   $(document).ready(function(){
       $('#message_board').scrollTop($('#message_board')[0].scrollHeight);
   });

$('#message_board').on('scroll', function() {
    var scroll = $('#message_board').scrollTop();
    if (scroll < 1) {
        // Store eference to first message
        var firstMsg = $('.bubble-left:first, .bubble-right:first');
        var curOffset = firstMsg.offset().top - $('#message_board').scrollTop();
        // Prepend new message here
        var content;
        $.get("ajax/scripts/msg_lst.php?p=<?php echo htmlentities(isset($_GET['p']) ? $_GET['p'] : ''); ?>&f=" + ($('.bubble-left, .bubble-right').length), function(data){
            content= data;
            $('#message_board').prepend(content);
            $('#message_board').scrollTop(firstMsg.offset().top-curOffset);// <<---- Had to add this event to the ajax success function 
            });
    }
});

jquery scroll bottom to top, prepand and ajax

3 Answers3