Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect scroll events with 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/

like image 826
Andy Gee Avatar asked Sep 14 '13 07:09

Andy Gee


2 Answers

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.

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
});
like image 182
Andy Gee Avatar answered Oct 18 '22 18:10

Andy Gee


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.

like image 22
Nik Chankov Avatar answered Oct 18 '22 19:10

Nik Chankov