Add more items from database when scroll

I have a problem, I can not run this script, the problem is that I use mcustomscrollbar and so I did not read the Scroll event; the scroll event is not executed.

<script type="text/javascript">
        var page = 1;

        $("#my_div").scroll(function () {
            $('#more').hide();
            $('#no-more').hide();

            if($("#my_div").scrollTop() + $("#my_div").height() > $("#my_div").height() - 200) {
                $('#more').css("top","400");
                $('#more').show();
            }
            if($("#my_div").scrollTop() + $("#my_div").height() == $("#my_div").height()) {

                $('#more').hide();
                $('#no-more').hide();

                page++;

                var data = {
                    page_num: page
                };

                var actual_count = "<?php echo $actual_row_count; ?>";

                if((page-1)* 12 > actual_count){
                    $('#no-more').css("top","400");
                    $('#no-more').show();
                }else{
                    $.ajax({
                        type: "POST",
                        url: "../data.php",
                        data:data,
                        success: function(res) {
                            $("#result").append(res);
                            console.log(res);

                        }
                    });
                }

            }


        });

    </script>

How can I adapt this script to this plugin, mcustomscrollbar http://manos.malihu.gr/jquery-custom-content-scroller/

The event

$(document).on('scroll',"#my_div",function () { 

is not recognized on this plugin mcustomscrollbar manos.malihu.gr/jquery-custom-content-scroller. Help me please!

Maybe because you aren't waiting for DOM ready. Try this:

<script type="text/javascript">
    var page = 1;
    $(function () { //DOM ready handler
        $(document).on('scroll',"#my_div",function () {
            //all your code here
        });
    });
</script>