0

私はここで少し困っています..だから私はdivの行を持っています、それらをミニボックスと考えてください。指定された幅/高さの領域内でそれらをスクロールできます。使用: http://manos.malihu.gr/jquery-custom-content-scroller

さて、これらの Div の 1 つに、その Div 内でスクロールしたいコンテンツが他にもあります。そして、ここで問題が発生します。私が何をしても、私はそれを達成することはできません。

スケルトンの例を次に示します。

<style type="text/css"> 
.rows{
    margin:50px auto;   width:400px; height:405px; overflow:auto;
}
.row{
  background: lightblue; height: 370px; width: 320px; margin: auto;
  padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px;
}
.column{
  float:left;
}
.columns{
    margin:50px auto;   width:800px; height:405px; 
}
</style>

<DIV id="container">

  <DIV class="columns">
    <DIV class="column">
      <DIV class="rows"> <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
    </DIV>
    <DIV class="column">
      <DIV class="rows">  <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
    </DIV>
    <DIV class="column">
      <DIV class="rows">  <div class="row"></div><div class="row"></div><div class="row"></div> </DIV>
    </DIV>
  </DIV>
</DIV>

  <link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery-ui-1.8.21.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script src="js/jquery.mCustomScrollbar.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>

    <script type='text/javascript'>


        $(window).load(function(){

            $(".rows").mCustomScrollbar({
                scrollButtons:{ enable:false }
            });
        }); 
    </script>   

====================

さらに明確にするために、div クラスの「行」内で、そのボックス内でスクロールする必要がある長い段落について説明します。

ありがとう

======================

JS/CSS リンク:

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mousewheel.min.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.css
4

0 に答える 0