barre de défilement cachée à moins que la page redimensionne

je besoin d'un plugin scrollbar personnalisé pour un projet personnel (par « coutume », je veux dire des effets d'inertie de base, des images personnalisées et ainsi de suite). Mon choix était mCustomScrollbar.barre de défilement cachée à moins que la page redimensionne

La documentation était en effet très clair, et je n'ai pas eu de problème la mise en œuvre du script, mais il semble fonctionner que lorsque je remets à la côte la page, comme si le défilement est pas nécessaire.

En fait, la barre de défilement a style="display: hidden" sur une page entièrement chargée, comme dans ce question (mais je n'ai trouvé aucune réponse utile).

Je crois qu'il ya un certain lien avec slidesjs question height (que je me sers aussi bien), mais je ne peux pas le trouver ... voici un code:

(There's la page entière, vous peut voir le code avec firebug ... juste aller sous "Pulcini" pour afficher la longue contenu)

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

Source

2012-09-10 trascendency

J'ai eu le même problème. Donc, j'ai changé le code fluide pour updateOnBrowserResize: true et updateOnContentResize: true, et maintenant il fonctionne très bien avec tout le javascript.

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

Source

2012-09-11 05:42:03 txirrindulari

A travaillé super. Merci pour la réponse :) Ce – trascendency

est de loin la meilleure solution que je l'ai vu. L'option qui a corrigé ce problème pour moi était: 'advanced: {updateOnContentResize: true}' –

Vous êtes ini tialiser le mCustomScrollbar alors que le conteneur est toujours caché, de sorte que le navigateur ne peut pas calculer la hauteur de la div. Vous devez soit déclencher un événement de redimensionnement lorsque la div devient visible, soit ne pas initialiser la barre de défilement jusqu'à ce qu'elle devienne active sur la page.

Source

2012-09-11 02:32:42 Stephen

Grand. Merci beaucoup! – trascendency

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

ce qui est très agréable pour le lien barre de défilement personnalisé J'utilise aussi ce plug-in dans mes projets, vous pouvez facilement personnalisé et barres de défilement imbriquées sont également disponibles ici.

Source

2013-07-24 12:39:44

barre de défilement cachée à moins que la page redimensionne

Répondre

Questions connexes