Scroll glatt auf schwebt eine ungeordnete Liste mit fester Höhe

Question

Ich habe eine feste Höhe ungeordnete Liste <ul> mit fester Höhe Listenelement <li>

Meine ul Höhe 600px und es enthält 200 li Artikel mit 40px Höhe.

Ich muss ein Skript erstellen, das die Liste nach unten scrollt, wenn die Maus den unteren Teil der Liste bewegt und nach oben scrollt, wenn der Mauszeiger über der Liste steht.

Ich versuchte dies: http://archive.plugins.jquery.com/project/hoverscroll, aber es ist nicht so glatt wie es sein sollte, also muss ich eine benutzerdefinierte erstellen (vielleicht nicht mit jQuery überhaupt).

Irgendwelche Ideen oder Beispiele? Wie kann ich den gewünschten Effekt erzielen?

Dank

Answer 1

angezeigt. Versuchen Sie, $ wrapper.animate ({scrollTop: step}) zu verwenden; zum Beispiel 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> 

es sieht ziemlich gut für mich ist

Answer 2

Warum in ein Raster nicht devide dem Bildschirm? Sobald die MausX und Maus das obere Raster treffen, wird ein vordefinierter ganzzahliger Wert von