javascript - jQuery infinite scroll in fixed height

Question

I'm trying to make an infinite scroll in my list. So far the scroll event is not triggered.

$(function() {
  var t = $('.notif-dropdown-menu').html(),
    c = 1,
    scroll_enabled = true;
  function load_ajax() {
    console.log('Triggered');
    $('.notif-dropdown-menu').append('<h4>' + (++c) + ' </h4>' + t);
    scroll_enabled = true;
  }
  $(window).bind('scroll', function() {
    if (scroll_enabled) {
      if($(window).scrollTop() >= ($('.notif-dropdown-menu').offset().top + $('.notif-dropdown-menu').outerHeight()-window.innerHeight)*0.9) {
        scroll_enabled = false;  
        load_ajax();
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul style="max-height: 250px; height: 100px; overflow: auto" class="notif-dropdown-menu">
    <li>
      <p>Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
      <p>Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
      <p>Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
      <p>Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
      <p>Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
    </li>
  </ul>

question from:https://stackoverflow.com/questions/65893114/jquery-infinite-scroll-in-fixed-height

Answer 1

This is just a matter of knowing what is used in the comparison.

By the way .bind() is deprecated. use .on().

You can "bind" the "infinite scrollable element" directly to a scroll event.
What you have to check is the height of the element + the scrolled pixels of that element.

If that is greater or equal to its scrollHeight property... Then call your function to append more.

Aditionnaly, a good practice is to store a lookedup element in a variable to avoid looking up for it uselessly.

In an event handler, $(this) refers to the element on which the event fired.

$(function() {

  var infinite_scrollable_element = $('.notif-dropdown-menu')
  var t = infinite_scrollable_element.html(),
    c = 1,
    scroll_enabled = true;

  function load_ajax() {
    console.log('Triggered');
    infinite_scrollable_element.append('<h4>' + (++c) + ' </h4>' + t);
    scroll_enabled = true;
  }

  infinite_scrollable_element.on('scroll', function() {
    let element = $(this)
    if (scroll_enabled) {

      if (element.height() + element.scrollTop() >= (element[0].scrollHeight)) {
        scroll_enabled = false;
        load_ajax();
      }
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul style="max-height: 250px; height: 100px; overflow: auto" class="notif-dropdown-menu">
  <li>
    <p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
    <p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
    <p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
    <p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
    <p>Lorem ipsum dolor sit amet Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor </p>
  </li>
</ul>