Barra di scorrimento nascosta a meno che ridimensioni pagina

Ho bisogno di un plug-in personalizzato per la barra di scorrimento per un progetto personale (per "personalizzato" intendo effetti di inerzia di base, immagini personalizzate e così via). La mia scelta è stata mCustomScrollbar.Barra di scorrimento nascosta a meno che ridimensioni pagina

La documentazione era davvero molto chiara e non ho avuto alcun problema nell'implementazione dello script, ma sembra funzionare solo quando ridimensiono la pagina, come se lo scorrimento non fosse necessario.

Infatti, la barra di scorrimento ha style="display: hidden" su una pagina completamente caricata, come in questo question (ma non sono riuscito a trovare alcuna risposta utile).

Credo che ci sia qualche problema height legata slidesjs (che sto usando pure), ma io non riesco a trovarlo ... ecco qualche codice:

(There's l'intera pagina, in modo da può visualizzare il codice con firebug ... basta andare in "Pulcini" per visualizzare il contenuto lungo)

<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; 
}

fonte

2012-09-10 trascendency

Ho avuto lo stesso problema. Così ho cambiato il codice del fluido per updateOnBrowserResize: true e updateOnContentResize: true, e ora funziona alla grande con tutto il javascript.

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

fonte

2012-09-11 05:42:03 txirrindulari

Ha funzionato alla grande. Grazie per la risposta :) – trascendency

Questa è di gran lunga la soluzione migliore che abbia mai visto. L'opzione che ha corretto questo problema era: 'advanced: {updateOnContentResize: true}' –

Sei ini tializzando l'mCustomScrollbar mentre il container è ancora nascosto, quindi il browser non può calcolare l'altezza del div. Dovrai attivare un evento di ridimensionamento quando il div diventa visibile o non inizializzare la barra di scorrimento finché non diventa attiva nella pagina.

fonte

2012-09-11 02:32:42 Stephen

Grande. Grazie mille! – trascendency

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

questo è molto bello di collegamento per la barra di scorrimento personalizzato Io uso anche questo plug-in nei miei progetti si può facilmente personalizzato e barre di scorrimento nidificate sono anche disponibili qui.

fonte

2013-07-24 12:39:44

Barra di scorrimento nascosta a meno che ridimensioni pagina

risposta

Problemi correlati