Обратная загрузка сообщений как в instagram через AJAX?

Question

[Богдан Кучерук]

Есть блок data в который подгружаются данные через jQuery по скрипту:

<script>
$(document).ready(function(){
    var inProgress=false;
    var startFrom=10;
    $('#data').scroll(function (){
        if(this.scrollTop === 0 && !inProgress ){
            $.ajax({
                url:'ajaxlogs.php',
                method:'POST',
                data:{"startFrom":startFrom},
                beforeSend:function(){inProgress=true;
                }

            }).done(function(data){
                data=jQuery.parseJSON(data);
                if(data.length>0){
                    $.each(data, function(index, data){
                        $(".my_cont").append('<p class="ogl">' + data.title + '</p><div class="box">' + data.text + '</div>');
                    });

                    inProgress=false;
                    startFrom +=10;
                }

            });
        }
    });
});
var block = document.getElementById("data");
  block.scrollTop = 9999;
</script>

Как можно сделать чтобы строки добавлялись не в конец блока .my_cont а в начало, как в инсте?

Comments

[Богдан Кучерук]

<script>
$(document).ready(function(){
    var inProgress=false;
    var startFrom=10;
    $('#data').scroll(function (){
        if(this.scrollTop === 0 && !inProgress ){
            $.ajax({
                url:'ajaxlogs.php',
                method:'POST',
                data:{"startFrom":startFrom},
                beforeSend:function(){inProgress=true;
                }

            }).done(function(data){
                data=jQuery.parseJSON(data);
                if(data.length>0){
                    $.each(data, function(index, data){
                        $(".my_cont").prepend('<p class="ogl">' + data.title + '</p><div class="box">' + data.text + '</div>');
                    });

                    inProgress=false;
                    startFrom +=10;
                }

            });
        }
    });
});
var block = document.getElementById("data");
block.scrollTop = 9999;
</script>

Так нормально работает только 1 загрузку. На следующую нужно проскролить немного вниз и затем уже вверх, к scrollTop 0. Как сделать правильно?

Answer 1

[Богдан Кучерук]

Так будет правильно:

<script>
$(document).ready(function(){
    var inProgress=false;
    var startFrom=10;
    $('#data').scroll(function (){
        if( this.scrollTop <= 100 && !inProgress ){
            $.ajax({
                url:'ajaxlogs.php',
                method:'POST',
                data:{"startFrom":startFrom},
                beforeSend:function(){inProgress=true;
                }

            }).done(function(data){
                data=jQuery.parseJSON(data);
                if(data.length>0){
                    $.each(data, function(index, data){
                        $(".my_cont").prepend('<p class="ogl">' + data.title + '</p><div class="box">' + data.text + '</div>');
                    });

                    inProgress=false;
                    startFrom +=10;
                }

            });
        }
    });
});
var block = document.getElementById("data");
block.scrollTop = 9999;
</script>