twitter-bootstrap - 如何在 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 )或使用事件委托(delegate)与 .on在 jQuery 中。

只需直接选择元素(因为您已定义其 id)，如下所示:

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

或者对于 jQuery:

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

这应该有效(我已经尝试过了)。