compatibilidad con scrollbar y fade in fade out

[mensajeescrito]

Hola amigos, verán tengo un extraño problema que no se a que puede deberse.

tengo 2 codigos javascript, uno me permite hacer un fade in y fade out a unos divs

con información en cada uno de ellos, haciendo así las veces del contenido de las opciones

de mi web al hacer click en las opciones de menú.


O dicho de otro modo al hacer click en las opciones de menu aparece contenido mediante un fade in y cuando hago click a otro boton de menu desaparece el contenido visible en ese momento con fade out y con un fade in aparece el siguiente contenido.

Esto funciona, va bien.


el segundo codigo es el de un scrollbar con efecto suave. Y tambien va bien.

Pero cuando lo implemento , el extraño efecto que pasa es:

que cuando hago click en un boton del menu aparece el contenido de la opcion de menu mediante fade in , pero el scrollbar no aparece, y si justo en ese momento cojo la pantalla del navegador donde sale la web y la arrastro a la segunda pantalla que tengo (por que tengo 2 pantallas conectadas a mi ordenador una mas grande que la otra), pues justo en ese momento al contendo le aparece ya el scrollbar al lado y funciona. pero como digo solo aparece el scrollbar cuando paso la ventana del navegador de una pantalla a la otra.

esto me di cuenta despues de hacer mil pruebas.

y ni se por que ocurre ni como arreglarlo.

Si alguien pudiera echarme una mano le estaria muy agradecido.

estos son los codigos:

Código Javascript:

<!--MOSTRAR-OCULTAR OPCIONES DEL MENÚS OPCS  ===================================================================-->
 
    <script>
    
        // inicialmente aparece la primera opcion marcada
        var ultimo=1;
        $(document).ready(function(){
 
            // evento que se ejecutara al seleccionar cualquier opcion del menu
 
 
 
         <!--   $(".cont_sub_opcs div").click(function(){-->
    
                $(".menus_opcs div").click(function(){      
                // obtenemos el nuevo id
                nuevo=$(this).attr("id");
                if(nuevo!=ultimo)
                {
                    // escondemos el ultimo id
                    $("#opc_"+ultimo).fadeOut(function(){
                        $("#"+ultimo).removeClass("seleccionado");
                        $("#"+nuevo).addClass("seleccionado");
                        // mostramos el nuevo id
                        $("#opc_"+nuevo).fadeIn();
                        ultimo=nuevo;
                    });
                }
                });
        });
 
 
 
    </script>
 

Codigo scrollbar:

Código Javascript:

<!-- SCROLLBAR DE OPCS PERSONALIZADO  =========================================================-->
 
        <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" /> 
 
        
        <!--<script src="js/jquery-1.9.1.min.js"></script>--> 
        <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
 
 
 
    <script>
    
        (function($){
            $(window).load(function(){
 
                    $(".contenedor_opcs").mCustomScrollbar({
                        scrollButtons:{
                            enable:true
                        }
                    });
 
                    });
 
        })(jQuery);
 
    </script>
 

Evidentemente lo que necesito es que al hacer click en cualquier opcion aparezca el contenido mediante fade in y con su scrollbar al lado.

gracias.