jquery colorbox and custom scrollbar

Question

I would like to use a custom scrollbar with Colorbox

I am using Wordpress so Colorbox is loaded using this plugin. All the custom scrollbar files have been loaded as per the instructions. I'm guessing that I need to apply to the #cboxLoadedContent div so I've loaded as per this code, however it's not working:

(function(jQuery){
    jQuery(window).load(function(){
        jQuery("#cboxLoadedContent").mCustomScrollbar();
    });
})(jQuery);

Using Firebug there's no alteration to the standard coding i.e. the JavaScript isn't firing. However if I add to the div #cboxContent the JavaScript fires and a class mCustomScrollbar _mCS_1 is added to the #cboxContent div. But this doesn't have a scrollbar so nothing is shown.

The question is why isn't it working on the right div i.e. #cboxLoadedContent?

Answer 1

#cboxLoadedContent is appended and removed dynamically each time a colorbox is opened or closed. Both plugins need to alter the markup and add their own wrappers, so simply calling mCustomScrollbar on either #cboxContent or #cboxLoadedContent won't work (mCustomScrollbar must wrap #cboxLoadedContent within .mCSB_container after #cboxLoadedContent is appended).

The best way is to call mCustomScrollbar function inside colorbox's onComplete callback. This way the scrollbar is added when colorbox has done its work which is append #cboxLoadedContent and load the actual content.

From colorbox examples:

$(".callbacks").colorbox({
    onComplete:function(){
        $("#cboxContent").mCustomScrollbar();
    }
});