'JQuery - implementation of infinite scroll inside modal window

I am trying to make infinite scroll inside classic bootstrap modal, in modal body (element $('.modal-body')) which I set as scrollable. My problem is to define the condition for loading more data when scroll bar hits the bottom of modal body. I found one some working example for the whole window (below), but not for modal window. Can you help me how to rewrite that code for modal body? Thanks.

$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) 
    {
      //just some logic for get more data
    }
});

I understand it should be something like $('.modal-body').scroll..... but the inner condition is not clear for me.

jquerytwitter-bootstrapbootstrap-modalinfinite-scroll


Solution 1:[1]

I've also attempted the scrollbar method, without any luck.

-- SOLUTION

  1. Use visible.js ? https://github.com/customd/jquery-visible
  2. Add ticker on main page
  3. Add "Load More" button underneath, but within your data container
  4. If "Load More" is visible - load the next set of data

-- EXAMPLE

window.setInterval(function LoadMoreData() {
try {
    if ($('#btn_LoadMore').visible(true) == true) {      
        Page++;
        LoadData(Page);
    }
} catch (e) {

}}, 500);

You might need to play around with the code inside the ticker to fit your needs.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lourens

Related Questions