滚动顺利悬停固定高度

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碰到顶部网格，它将向上滚动一个预定义的整数值