我有一个很长的引导模式,像上一个例子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");
});
所有这些都是工作,直到我打开模态。但当模态是开放的上述代码没有工作。工作再次当我关闭模态和滚动。
2条答案
按热度按时间vi4fp9gy1#
您应该注意到,
scroll
事件没有冒泡,因此您不能在某个父元素(如document
)上附加处理程序,也不能在jQuery中使用.on
的事件委托。只需直接选择元素(因为您已经定义了它的id),如下所示:
或者对于jQuery:
这应该行得通(我已经试过了)。
dy2hfwbg2#
如果您在模态对话框中使用
.modal-fullscreen
,则scroll Listener for.getElementById('myModalID')
**将不起作用!**因为对话框本身保持静止,并且滚动仅在模态体内部发生在我给modal-body添加了一个监听器之后,一切都正常了:
--
P.S.我花了很多时间不明白为什么
.querySelector('.modal-body')
不工作,直到我意识到我有多个对话框在页面上♂和.querySelector
得到错误的对话框♂🤦♂️ and.querySelector
gets the wrong dialog 🤷♂😁