How to detect position of the Bootstrap modal scrollbar?

Question

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?

Probably because scrollTop is well known function in jQuery :) — Alan Mroczek, Nov 09 '16 at 09:32
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, Nov 09 '16 at 16:34

AlexioVay · Accepted Answer · 2017-10-19T15:31:40.120

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');
    } 

});

Please vote up my question/answer if it helps you.

edited Oct 19 '17 at 15:31

answered Nov 09 '16 at 16:49

AlexioVay

3,158
2
21
41

I have the same problem but your code is not working for me – pietà Oct 18 '17 at 14:54
I've edited my post. Tested and works with Google Chrome and modern Android devices. The `100` means that 100 pixel are the threshold (to activate infinite scroll and load-more-content option in my case). – AlexioVay Oct 19 '17 at 15:34
could you please make a jsfiddle ? – pietà Oct 19 '17 at 15:49

score 2 · Answer 2 · answered Nov 09 '16 at 10:02

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

score 0 · Answer 3 · answered Mar 01 '21 at 12:36

This will work for Bootstrap 4.7, it will trigger a console log command 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')
    }
}

How to detect position of the Bootstrap modal scrollbar?

3 Answers3