如何在Bootstrap模态上监听滚动事件？

Question

我有一个很长的引导程序模式，就像这里的最后一个示例一样。我想检测模式打开时用户是否滚动。

我试过了

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

也尝试过

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

和

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

所有这些都有效，直到我打开模态。但是，当模式打开时，以上代码均无效。当我关闭模式并滚动时，可以再次使用。

Answer 1

您应该注意到该scroll事件没有冒泡，因此您不能在某个父元素（例如document）上附加处理程序，也不能.on在jQuery中使用事件委托。

只需直接选择该元素（因为您已定义其ID）即可，如下所示：

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

或对于jQuery：

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

那应该工作（我已经尝试过了）。