Barra de desplazamiento oculta a menos que cambie el tamaño de la página

Necesito un complemento de barra de desplazamiento personalizado para un proyecto personal (por "personalizado" me refiero a efectos de inercia básicos, imágenes personalizadas, etc.). Mi elección fue mCustomScrollbar.Barra de desplazamiento oculta a menos que cambie el tamaño de la página

La documentación fue muy clara, y no he tenido ningún problema para implementar el script, pero parece funcionar solo cuando cambio el tamaño de la página, como si no fuera necesario desplazarse.

De hecho, la barra de desplazamiento tiene style="display: hidden" en una página completamente cargada, como en este question (pero no pude encontrar ninguna respuesta útil).

Creo que hay alguna cuestión vinculada a heightslidesjs (que estoy usando también), pero simplemente no lo encuentro ... aquí hay algo de código:

(There's la página entera, por lo que puede ver el código con Firebug ... sólo tiene que ir en "Pulcini" para ver el contenido de largo)

<head> 
    <!-- everything is included --> 
    <link href="css/style.css" type="text/css" rel="stylesheet" /> 
    <link href="css/jquery.mCustomScrollbar.css" type="text/css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> 
    <script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script> 
    <script> 
    $(function(){ 
     $("#slides").slides({ 
     generatePagination: false, 
     pagination: true, 
     paginationClass: 'pagination' 
     }); 
    }); 
    </script> 
    <script> 
    (function($){ 
     $(window).load(function(){ 
     $("#slide2").mCustomScrollbar(); 
     }); 
    })(jQuery); 
    </script> 
</head> 
<body> 
    <div id="slides"> 
    <!-- other stuff --> 
    <div class="slides_container"> 
     <div id="slide1"> 
     <h2>Uova</h2> 
     <p>Text1...</p> 
     </div> 
     <!-- slide2 is the scrollbar div --> 
     <div id="slide2"> 
     <h2>Blabla</h2> 
     <p>Lorem ipsum</p><br /> 
     </div> 
    </div> 
    </div> 
</body>

CSS:

div#slides { 
    height: 506px; 
} 
.slides_container { 
    width: 900px; 
    height: 506px; 
} 

.slides_container, div#slide1, div#slide2, div#slide3, { 
    width: 808px; 
    height: 366px; 
    display: block; 
    float: left; 
    overflow-y: auto; 
} 

.slides_container { 
    margin-top: 30px; 
    margin-bottom: 30px; 
    height: 366px; 
}

Fuente

2012-09-10 trascendency

Tuve el mismo problema. Así que cambié el código de fluido para updateOnBrowserResize: true y updateOnContentResize: true, y ahora funciona muy bien con todos los javascript.

(function($) { 
    $(window).load(function() { 
    $("#content_1").mCustomScrollbar({ 
     scrollEasing:"easeOutCirc", 
     mouseWheel:"auto", 
     autoDraggerLength:true, 
     advanced:{ 
     updateOnBrowserResize:true, 
     updateOnContentResize:true 
     } // removed extra commas 
    }); 
    }); 
})(jQuery);

Fuente

2012-09-11 05:42:03 txirrindulari

Funcionó muy bien. Gracias por la respuesta :) – trascendency

Esta es de lejos la mejor solución que he visto. La opción que me corrigió este problema fue: 'advanced: {updateOnContentResize: true}' –

Eres ini Al utilizar el mCustomScrollbar mientras el contenedor está todavía oculto, el navegador no puede calcular la altura del div. Tendrá que activar un evento de cambio de tamaño cuando el div se vuelva visible o no inicializar la barra de desplazamiento hasta que se active por primera vez en la página.

Fuente

2012-09-11 02:32:42 Stephen

Genial. ¡Muchas gracias! – trascendency

http://manos.malihu.gr/jquery-custom-content-scroller/

esto es muy bonito enlace de barra de desplazamiento a medida también utilizo este plug-in en mis proyectos se puede personalizar fácilmente y barras de desplazamiento anidados también está disponible aquí.

Fuente

2013-07-24 12:39:44

Barra de desplazamiento oculta a menos que cambie el tamaño de la página

Respuesta

Cuestiones relacionadas