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

Question

我有一个非常长的bootstrap模式，就像最后一个例子here一样。我想检测用户是否在模态打开时滚动。

我试过

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）上附加处理程序或在jQuery中使用.on的事件委托。

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

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

或者对于jQuery：

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

这应该有效（我已经尝试过了）。