How to listen to scroll event on a Bootstrap modal?

Question

I have a really long bootstrap modal like the last example here. I want to detect if user scrolls when the modal is open.

I tried

document.addEventListener('scroll', function(event) {
        console.log("Scrolling");
});

also tried

$(document).on("scroll","#myModalID",function() {
     // I tried targeting .modal-body and .modal-content too
     console.log("Scrolling");
});

and

$(window).on("scroll",function() {
     console.log("Scrolling");
});

All these are working until I open the modal. But when the modal is open none of the above code works. Works again when I close the modal and scroll.

Answer 1

You should notice that the scroll event is not bubbled, so you cannot attach handler on some parent element (like document) or use event delegating with .on in jQuery.

Just select the element directly (because you have its id defined), like this:

document.getElementById('myModalID')
        .addEventListener('scroll', function(event) {
    console.log("Scrolling");
});

Or for jQuery:

$('#myModalID').on("scroll", function() {      
  console.log("Scrolling");
});

That should work (and I've already tried it).