I'm using JQuery and Bootstrap and I'm loading a modal with an ajax request, so content will be loaded dynamically inside of the modal.

I managed to load more content with a button click (also inside the modal), but I wanted to implement a infinite scroll feature.

However the window.onscroll function didn't seem to work or to recognize the scroll position inside the modal, even if I define it inside the modal after the first ajax request.

Question: How can I detect if a specific element inside the modal is visible to the user to load more content automatically?

I'm using JQuery and Bootstrap and I'm loading a modal with an ajax request, so content will be loaded dynamically inside of the modal.

I managed to load more content with a button click (also inside the modal), but I wanted to implement a infinite scroll feature.

However the window.onscroll function didn't seem to work or to recognize the scroll position inside the modal, even if I define it inside the modal after the first ajax request.

Question: How can I detect if a specific element inside the modal is visible to the user to load more content automatically?

• javascript
• jquery
• twitter-bootstrap
• bootstrap-modal
• infinite-scroll

• 1 Why the downvotes for this very precise stated question? – AlexioVay Commented Nov 9, 2016 at 8:15
• Probably because scrollTop is well known function in jQuery :) – Alan Mroczek Commented Nov 9, 2016 at 9:32
• 1 Still it's not the right answer to my specific question. I need to know how to detect the scroll behaviour inside the modal, because window.onscroll doesn't work. – AlexioVay Commented Nov 9, 2016 at 16:34

3 Answers 3

Actually I found out the right answer myself:

var modal_scrollTop = $('.modal-body').scrollTop();
var modal_scrollHeight = $('.modal-body').prop('scrollHeight');
var modal_innerHeight = $('.modal-body').innerHeight();

$('.modal-body').scroll(function() {

    // Write to console log to debug:
    console.warn('modal_scrollTop: ' + modal_scrollTop);
    console.warn('modal_innerHeight: ' + modal_innerHeight);
    console.warn('modal_scrollHeight: ' + modal_scrollHeight);

    // Bottom reached:
    if (modal_scrollTop + modal_innerHeight >= (modal_scrollHeight - 100)) {
        alert('reached bottom');
    } 

});

This should do the trick

const $modal = $("#myModal")
const $bookList = $modal.find('.media-list')

$modal.scroll(e => {
  const $middleBook = $bookList.find('.media').eq(BOOKS_CHUNK_SIZE / 2)
  const middleBookInViewport = $(window).height() > $middleBook.offset().top;

  if(bookChunks.length && middleBookInViewport){
    $bookList.append(bookChunks.shift().map(bookTemplate))
  }
})

jsFiddle

This will work for Bootstrap 4.7, it will trigger a console log mand 100px from the bottom of the modal body bottom.

$('.modal-body').bind('scroll', chk_scroll);

function chk_scroll(e) {
    var elem = $(e.currentTarget), offsetHeight = 100;

    if (elem[0].scrollHeight - elem.scrollTop() - elem.outerHeight() <= offsetHeight) {
        console.log('Near the bottom')
    }
}