私はここで少し困っています..だから私は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