AJAX autoload when scrolling in HTML5 section

Question

I am working on a website that automatically downloads new content from a MySQL database in a scroll. But the problem is that it loads new content, even if the scroll is negligible. I mean, it loads the new content into the scroll, but not at the end of the page. The scrollable section is in a static frame.

JQuery Code:

  <script type="text/javascript">
      $(document).ready(function() {
        var track_load = 0; //total loaded record group(s)
        var loading  = false; //to prevents multipal ajax loads
        var total_groups = <?php echo $total_groups; ?>; //total record group(s)
        $('#results').load("autoload_process.php", {'group_no':track_load}, function() {track_load++;}); //load first group
        $("#frames").scroll(function() { //detect page scroll
          if($(window).scrollTop() + $(window).height() == $(document).height())  //user scrolled to bottom of the page?
          {
            if(track_load <= total_groups && loading==false) //there more data to load
            {
              loading = true; //prevent further ajax loading
              $('.animation_image').show(); //show loading image
              //load data from the server using a HTTP POST request
              $.post('autoload_process.php',{'group_no': track_load}, function(data){
                $("#results").append(data); //append received data into the element
                //hide loading image
                $('.animation_image').hide(); //hide loading image once data is received
                track_load++; //loaded group increment
                loading = false; 

              }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                alert(thrownError); //alert with HTTP error
                $('.animation_image').hide(); //hide loading image
                loading = false;

              });

            }
          }
        });
      });
    </script> 

Guys, please help me with this. Maybe there is some problem with `

$ (window) .scrollTop () + $ (window) .height () == $ (document) .height () `this part.

I want to track the scroll of a section, not a window.

Answer 1

:

<div class="container">
    <div class="scroll-content">
        <p>Scroll container</p>
    </div>
</div>

CSS

.container {
    position: relative;
    height: 400px;
    width: 300px;
    overflow-y: scroll;
}

.scroll-content {
    position: relative;
    height: 1200px; /* height just added for illustrative purposes */
    width: 300px;
    background: #849558;
}

ajax :

$('.container').scroll( function() {
    var fromtop = $(this).scrollTop(),
        height = $(this).find('.scroll-content').innerHeight() - $(this).innerHeight();
        // In the above line we're finding the height of the scrollable content
        // and subtracting the height of the viewable area (or parent container).

    if ((height - fromtop) < 50) {
       alert('trigger ajax call'); 
    }
});

< 50 . , .

, , , .

Fiddle