使用bootstrap-modal modalOverflow检测滚动事件?

I have a number of tooltips a date pickers used in my modal. How can I detect if the overflow modal has been scrolled so I can either reposition any open floating elements and reposition them according to the modal scroll position? Thx

我有很多工具提示一个日期选择器在我的模式中使用。如何检测溢出模式是否已滚动，以便可以重新定位任何开放的浮动元素并根据模式滚动位置重新定位它们?谢谢

window.scroll is not firing!

窗口。滚动不是射击!

An example of this is available here: Long modals (bottom of page) http://jschr.github.io/bootstrap-modal/

这里有一个例子:Long modals(页面底部)http://jschr.github.io/bootstrap-modal/

4 个解决方案

#1

You already answered your own question, but I would add that it's working this way as well:

你已经回答了你自己的问题，但我想补充一点，它也是这样运作的:

$("#modalcontact").modal().on('loaded.bs.modal', function(){
   $(this).parents('.modal-scrollable').scroll(function(){
      //Do stuff
   });
});

I've struggled to manage to work with shown event, but it was because the content was loaded remotely.

我一直在努力处理显示事件，但这是因为内容是远程加载的。

#2

OK, I sorted it. The scroll event doesn't propagate to the document level of the DOM so $(document).on doesn't work. I got around it with this hack.

好的,我整理它。滚动事件不会传播到DOM的文档级别，所以是$(document)。不起作用。我用这招避开了。

This did work.

这是工作。

$(document).on("shown", "#modalcontact", function() {
    $(".modal-scrollable").unbind("scroll");
    $(".modal-scrollable").scroll(function(){
        //do stuff
    });
});

This didn't work.

这没有工作。

$("#modalcontact").modal({
    shown: function (){
        $(".modal-scrollable").scroll(function(){
            //do stuff
        });     
    }
});

This didn't work.

这没有工作。

$(document).on("scroll", ".modal-scrollable", function(){
    //do stuff
});

#3

Try

试一试

$(document).on('scroll', '.modal-scrollable', function(){
//your code here
});

The scroll event handler can be bound to more than just the window.

滚动事件处理程序可以绑定到不仅仅是窗口。

#4

This worked for me, whereas the earlier answers didn't for some reason. But I am opening the modal window using code, so that I can dynamically fill it with content before it is shown.

这对我很有效，而之前的答案并没有什么原因。但是我正在使用代码打开模态窗口，以便在显示内容之前动态地填充它。

 $('#modalcontact').modal('show');

 $(".modal-scrollable").unbind("scroll");
 $(".modal-scrollable").scroll(function () {
    $('body').append('Hey hey hey!');
 });