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>

A working example but not with a list (taken from here Detecting when user scrolls to bottom of div with jQuery):

$(function() {
  var t = $('.posts').html(),
    c = 1,
    scroll_enabled = true;
  function load_ajax() {
    $('.posts').append('<h4>' + (++c) + ' </h4>' + t);
    scroll_enabled = true;
  }
  $(window).bind('scroll', function() {
    if (scroll_enabled) {
    if($(window).scrollTop() >= ($('.posts').offset().top + $('.posts').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>
<div class="posts">
  Lorem ipsum dolor sit amet  Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit
  sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut libero Curabitur id <br>  Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet lacus Donec <br> Ut ut
  libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque <br> Lorem ipsum dolor sit amet <br> Consectetuer augue nibh lacus at <br> Pretium Donec felis dolor penatibus <br> Phasellus consequat Vivamus dui lacinia <br> Ornare nonummy laoreet
  lacus Donec <br> Ut ut libero Curabitur id <br> Dui pretium hendrerit sapien Pellentesque
</div>

In the second example, the `window` is being scrolled, but in the first one you are having the scrollable content in your `notif-dropdown-menu` div, replacing `${window).bind('scroll...` with `$('.notif-dropdown-menu').bind('scroll...` would make it works — Zac, Jan 25 '21 at 22:15
yes, you need to update your internal logic to, you still have `$(window).scrollTop()` and `window.innerHeight`, in the first example you don't need to rely on any of window's props — Zac, Jan 25 '21 at 22:20

score 0 · Answer 1 · answered Jan 26 '21 at 00:43

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>

jQuery infinite scroll in fixed height

1 Answers1