how to get alert before scroll reaches at end

Question

$.ajax({
    url: "http://localhost:50971//Home/NewMethod",
    type: "get",
    dataType: "json",
    cache: false,
    success: function (Result)
    {
        var select = $('<Select />', {id:'ddlDynamic'});
        var appenddata;
        $.each(Result.slice(0,50), function (key, value) {
            appenddata += "<option value = '" + value.PKFormID + " '>" + value.FormDesc + " </option>";
        });
        $(select).html(appenddata).appendTo('#dropdown');
        $('#ddlDynamic').scroll(function () {
            if ($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight()) {
                alert("end of scroll");
                // You can perform as you want

            }
        });            
    }
});

i am getting data in Result and i have shown 50 records for the first time. Now i want to do like when i reach at end it shows a alert displaying a message but i am not getting anything neither an error.

Help needed. Thanks.

Answer 1

Can you try to use this. It works here

$.ajax({
    url: "http://localhost:50971//Home/NewMethod",
    type: "get",
    dataType: "json",
    cache: false,
    success: function (Result)
    {
        ....... // your code here
        $(window).scroll(function() {
             var divTop = $('#yourDivId').offset().top,
             divHeight = $('#yourDivId').outerHeight(),
             wHeight = $(window).height(),
             windowScrTp = $(this).scrollTop();
             if (windowScrTp > (divTop+divHeight-wHeight)){
                    alert('reached to bottom');
             }
        });           
    }
});