Bootstrap 如何在引导模式下监听滚动事件?

ehxuflar  于 2023-03-06  发布在  Bootstrap
关注(0)|答案(2)|浏览(132)

我有一个很长的引导模式,像上一个例子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");
});

所有这些都是工作,直到我打开模态。但当模态是开放的上述代码没有工作。工作再次当我关闭模态和滚动。

vi4fp9gy

vi4fp9gy1#

您应该注意到,scroll事件没有冒泡,因此您不能在某个父元素(如document)上附加处理程序,也不能在jQuery中使用.on的事件委托。
只需直接选择元素(因为您已经定义了它的id),如下所示:

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

或者对于jQuery:

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

这应该行得通(我已经试过了)。

dy2hfwbg

dy2hfwbg2#

  • 〉〉 Bootstrap 5.x*〉〉全屏模式

如果您在模态对话框中使用.modal-fullscreen,则scroll Listener for .getElementById('myModalID')**将不起作用!**因为对话框本身保持静止,并且滚动仅在模态体内部发生
在我给modal-body添加了一个监听器之后,一切都正常了:

document.querySelector('#myModalID .modal-body')
        .addEventListener('scroll', function(event) {
            console.log("Scrolling");
        });

--
P.S.我花了很多时间不明白为什么.querySelector('.modal-body')不工作,直到我意识到我有多个对话框在页面上♂和.querySelector得到错误的对话框♂🤦‍♂️ and .querySelector gets the wrong dialog 🤷‍♂😁

相关问题