1

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.

user2095405
  • 347
  • 1
  • 4
  • 15

1 Answers1

0

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.

Lourens
  • 36
  • 1
  • 2