スムーズホバー上のスクロール固定の高さ

Question

と順不同リストI一定の高さのリスト項目<li>

マイulの高さが600PXであり、それは40ピクセルの高さ200個のli項目が含まれているとの固定の高さ順不同リスト<ul>を持っています。

リストの一番下にマウスを移動するとリストをスクロールし、リストの一番上にマウスを移動するとスクロールするスクリプトを作成する必要があります。

私はこの試みた： http://archive.plugins.jquery.com/project/hoverscrollをそれがあるべきほど滑らかではないので、私は（多分すべてではjQueryを使用していない）のカスタムを作成する必要があります。

どのようなアイデアや例がありますか？どのようにして効果を達成できますか？

ありがとうございました

Answer 1

$ wrapper.animate（{scrollTop：step}）;を使用しようとしています。 例えば JS：

var isScroll = false; 

    $(document).ready(function() { 
     $('#up').hover(function() { 
      isScroll = true; 
      gotoNext(true); 
     }, function() { isScroll = false; }); 
     $('#down').hover(function() { 
      isScroll = true; 
      gotoNext(false); 
     }, function() { isScroll = false; }); 
    }); 

    function gotoNext(dir) { 
     if (isScroll) { 
      isScroll = true; 
      var step = dir ? '-=20' : '+=20'; 
      $('#wrapper').animate({ 
       scrollTop: step 
      }, 200, "linear"); 
      setTimeout(function() { gotoNext(dir); }, 200); 
     } 
    } 

はHTML：

<div style="height:10px; background:green; width:200px;" id="up"></div> 
<div style="height:200px; overflow:auto; width:200px;" id='wrapper'> 
<ul> 
<li style="height:30px;">1</li> 
<li style="height:30px;">2</li> 
<li style="height:30px;">3</li> 
<li style="height:30px;">4</li> 
<li style="height:30px;">5</li> 
<li style="height:30px;">6</li> 
<li style="height:30px;">7</li> 
<li style="height:30px;">8</li> 
<li style="height:30px;">9</li> 
<li style="height:30px;">1</li> 
<li style="height:30px;">2</li> 
<li style="height:30px;">3</li> 
<li style="height:30px;">4</li> 
<li style="height:30px;">5</li> 
<li style="height:30px;">6</li> 
</ul> 
</div> 
<div style="height:10px; background:green; width:200px;" id="down"></div> 

それはあなたがグリッドに分割して何を意味するの

Answer 2

なぜ画面をグリッドに分割しないのですか？ mouseXとmouseYが一番上のグリッドに当たったら、あらかじめ定義された整数値でスクロールします。