滚动后如何加载ajax？

I have ajax pages more than one and I want to load my ajax page after scroll how can I do this ? I have a simple basic structure and I want to load my ajax after scroll like infinite scroll or lazy images.

$('.lazy_content').on('load', function (e) {

            data_url = $(this).attr("data-url");
            data_id = $(this).attr("data-target-id");

            $.ajax({
                url: data_url,
                type: "POST",
                beforeSend: function () {
                    $(".loaderDiv").show();
                    $("#" + data_id).html("");
                },
                success: function (data) {
                    　$(data).each(function(index, el) {
                        $(".loaderDiv").hide();
                        $("#" + data_id).html(data);
                    });
                }

            })

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lazy_content" data-url="/ajax/comments/aurum-didyma-spa-beach-resort" data-target-id="comments-content">
  <h4>COMMENTS</h4>
  <div id="comments-content" class="content-target"></div>
</div>

</div>

Just add the event scroll on the element (div):

 $('.lazy_content').scroll(function() {
      data_url = $(this).attr("data-url");
      data_id = $(this).attr("data-target-id");

      $.ajax({
           url: data_url,
           type: "POST",
           beforeSend: function () {
                $(".loaderDiv").show();
                $("#" + data_id).html("");
           },
           success: function (data) {
                $(data).each(function(index, el) {
                     $(".loaderDiv").hide();
                     $("#" + data_id).html(data);
                });
           }
      })
 });

You have a native JS event for that purpose:

    onscroll="myFunction"