隐藏的滚动条，除非页面调整

我需要一个自定义滚动条插件的个人项目（“自定义”我的意思是基本的惯性影响，自定义图像等）。我的选择是mCustomScrollbar。隐藏的滚动条，除非页面调整

文档确实非常清晰，我没有任何实施脚本的麻烦，但它似乎只在我调整页面大小时才起作用，就好像不需要滚动一样。

实际上，滚动条在满载页面上有style="display: hidden"，就像这个question（但我找不到任何有用的答案）。

我相信有一些height问题与slidesjs（我使用的为好）联系在一起，但我无法找到它......这里的一些代码：

（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}' –