1

私は高さのあるDivを持っています395px、そしてoverflow hidden、このように：

<style>
   ​#content {
       width: 100%;
       height: 395px;
       overflow: hidden;
}​
</style>

<div id="content">
    1<br>2<br>3<br>4<br>......<br>29<br>30<br>
    1<br>2<br>3<br>4<br>......<br>29<br>30<br>
</div>

<a href="#">UP</a>
<a href="#">DOWN</a>​​​​​​​​​

ボタンはdivのコンテンツをスクロールする必要がありますが、マウスオーバーではスクロールしません。高さ132ピクセル、EaseOutCubicでシングルクリックスクロールします。たくさんのスクローラーを見つけましたが、すべてマウスオーバーで、マウスクリックで動作する必要があります。

4

1 に答える 1

2

あなたはこのようなものを使うことができます

<style>
   ​#content {
       width: 100%;
       height: 395px;
       overflow: scroll;
}​
</style>

<div id="content">
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
    21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
    1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
    11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
    21<br>22<br>23<br>24<br>25<br>26<br>27<br>28<br>29<br>30<br>
</div>

<a href="#" class="up">UP</a>
<a href="#" class="up">DOWN</a>​​​​​​​​​

<script type="text/javascript">
(jQuery.noConflict())(function($){
  $('a.up').click(function(){
    var newTop = $('#content').scrollTop() + 132;
    //TODO: newtop not greater than height - 132
    $('#content').animate({'scrollTop': newTop}, 250);
  });
});
</script>
于 2012-08-10T19:09:43.767 に答える