Как сделать загрузку элементов при прокрутки?

Question

[Mestniydevil]

Где я ошибаюсь? Делаю подгрузку элементов при прокрутки по началу все отрабатывает нормально когда scroll в конце а потом начинает все подгружается с середины. Как то не корректно. Размер блока моего width: 950px;height: 450px;

Пишу скрипт так. Но он не срабатывает как нужно!

var inProgress = false;
    var startFrom = 42;

    $('#loded').scroll(function () {
        if($('#loded').scrollTop() + $('#loded').height() >= $('#loded').height() && !inProgress) {
            $.ajax({
                url: 'obrabotchik.php',
                method: 'POST',
                data: {"startFrom" : startFrom},
                beforeSend: function(data) {inProgress = true;}}).done(function(data){
                    data = jQuery.parseJSON(data);
                    if (data.length > 0) {
                        $.each(data, function(index,data){
                            $("#loded").append(`<img style='left: 10px;position: relative;margin-right: 10px;margin-top: 10px;' class='add' data-id='${data.track}'src='//img.youtube.com/vi/${data.track}/mqdefault.jpg' width='120' height='90'>`);
                            $('.add').on('click', function () {
                                var url = $(this).attr('data-id');
                                var u ="http://www.youtube.com/v/"+url+"?version=3";
                                player.loadVideoByUrl(u);
                                player.unMute();
                            });
                    });
                        inProgress = false;
                        startFrom += 42;
                }});
        }

    });

Answer 1

[inzeppelin]

Скорее всего у вас неправильное условие:

$('#loded').scrollTop() + $('#loded').height() >= $('#loded').height()

$('#loded').height() будет всегда отдавать 450px, а $('#loded').scrollTop() в нижней точке скролла сначала будет равен 450px, потом 900px, потом 1350px и так далее.

Попробуйте сделать так:

$('#loded').scrollTop() >= $('#loded')[0].scrollHeight - $('#loded').height()

Или посмотрите в сторону готовых библиотек.