在另一个滚动分区内滚动Div

时间:2012-10-10 01:32:55

标签: javascript jquery html css jquery-ui

我在这里有点腌菜..所以我有一排div,把它们想象成迷你盒子。我能够在指定的宽度/高度区域内滚动它们。使用:http://manos.malihu.gr/jquery-custom-content-scroller

现在,在其中一个Div中,我有更多内容,我想在该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类“row”中,我会说一个需要在该框中滚动的长段落。

由于

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

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

0 个答案:

没有答案