6

個人プロジェクト用のカスタム スクロールバー プラグインが必要です (「カスタム」とは、基本的な慣性効果、カスタム イメージなどを意味します)。私の選択はmCustomScrollbar でした。

ドキュメントは確かに非常に明確で、スクリプトの実装に問題はありませんでしたが、スクロールが必要ないかのように、ページのサイズを変更した場合にのみ機能するようです.

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

heightリンクされている問題があると思いますslidesjs（私も使用しています）が、それを見つけることができません...ここにいくつかのコードがあります：

(ページ全体があるので、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;
}​
4

3 に答える 3

16

私は同じ問題を抱えていました。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-11T05:42:03.113 に答える
3

コンテナーがまだ非表示になっている間に mCustomScrollbar を初期化しているため、ブラウザーは div の高さを計算できません。div が表示されたときにサイズ変更イベントをトリガーするか、ページで最初にアクティブになるまでスクロールバーを初期化しない必要があります。

于 2012-09-11T02:32:42.613 に答える