ページがリサイズされない限り非表示のスクロールバー

パーソナルプロジェクト用のカスタムスクロールバープラグインが必要です（「カスタム」は基本的な慣性効果、カスタムイメージなどを意味します）。私の選択はmCustomScrollbarでした。ページがリサイズされない限り非表示のスクロールバー

ドキュメントは確かに非常に明確で、スクリプトの実装には問題はありませんでしたが、スクロールが不要なようにページのサイズを変更したときにのみ動作するようです。

実際、このquestionのように、スクロールバーには完全に読み込まれたページにstyle="display: hidden"があります（しかし、私は有用な回答は見つかりませんでした）。

私は（私も使っています）slidesjsにリンクされたいくつかのheight問題があります信じているが、私はちょうどそれを見つけることができません...ここにいくつかのコードです：

（There'sページ全体ので、あなた放火犯でコードを表示することができます...ちょうど長いコンテンツを視聴するには、 "Pulcini" の下に行く）

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

出典

2012-09-10 trascendency

同じ問題がありました。だから私はupdateOnBrowserResize: trueとupdateOnContentResize: trueの流体コードを変更し、今はすべてのjavascriptでうまくいきます。

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

出典

2012-09-11 05:42:03 txirrindulari

うまくいった。回答ありがとうございました:) – trascendency

これは私が見た限りでは最高の解決策です。私のためにこの問題を修正したオプションは 'advanced：{updateOnContentResize：true}'でした。 –