jQuery Colorbox和自定义滚动条

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 ie 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 ie #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();
    }
});

Answer 2

Just a quick note about the code in the accepted answer. I couldn't get it to work with $("#cboxContent") as shown; I needed to use $('#cboxLoadedContent').

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