除非页面调整大小，否则隐藏滚动条答案

【问题标题】：Hidden scrollbar unless page resize除非页面调整大小，否则隐藏滚动条
【发布时间】：2012-09-03 10:32:55
【问题描述】：

我需要一个用于个人项目的自定义滚动条插件（“自定义”是指基本惯性效果、自定义图像等）。我的选择是mCustomScrollbar。

文档确实很清楚，我在实现脚本时没有遇到任何问题，但它似乎只有在我调整页面大小时才有效，好像不需要滚动一样。

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

我相信有一些 height 问题与 slidesjs（我也在使用）相关联，但我就是找不到它...这里有一些代码：

(There's整个页面，所以你可以用firebug查看代码...只需进入“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;
}

【问题讨论】：

标签： jquery html scrollbar mcustomscrollbar

【解决方案1】：

我有同样的问题。所以我更改了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);

【讨论】：

效果很好。谢谢你的回答:)
这是迄今为止我见过的最好的解决方案。为我纠正此问题的选项是：advanced: { updateOnContentResize : true }

【解决方案2】：

您正在初始化 mCustomScrollbar，而它所在的容器仍处于隐藏状态，因此浏览器无法计算 div 的高度。您需要在 div 变为可见时触发调整大小事件，或者在滚动条首次在页面上变为活动状态之前不初始化滚动条。

【讨论】：

【解决方案3】：

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

这是自定义滚动条的非常好的链接我也在我的项目中使用了这个插件，你可以轻松地自定义它，嵌套滚动条也可以在这里使用。

【讨论】：