滾動順利懸停固定高度

Question

無序列表我有一個固定的高度無序列表<ul>固定高度的列表項<li>

我UL高度爲600像素，它包含40像素高度200米的物品。

我需要創建一個腳本，它在鼠標懸停在列表底部時向下滾動列表，並在鼠標懸停在列表頂部時向上滾動。

我試過這個：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

爲什麼不把你的屏幕放入網格？一旦鼠標X和鼠標Y碰到頂部網格，它將向上滾動一個預定義的整數值