将鼠标悬停在固定高度的无序列表上可平滑滚动 [英] Scroll smoothly on hover an unordered list with fixed height

问题描述

我有一个固定高度的无序列表< ul> 与固定高度列表项目< li>

我的ul高度是600px，它包含200个li项目，高度为40px。

我需要创建一个脚本当鼠标悬停在列表底部时向下滚动列表，并在鼠标悬停在列表顶部时向上滚动。

我试过这个： http://archive.plugins.jquery.com/project/hoverscroll 但它并不像它那么流畅应该是，所以我需要创建一个自定义的（可能根本不使用jQuery）。

任何想法或例子？如何才能达到预期的效果？

谢谢 试试

试试使用$ wrapper.animate（{scrollTop：step}）;
例如
JS：

  var isScroll = false; 
 $ b $（document）.ready（function（）{
 $（'＃up'）。hover（function（）{
 isScroll = true; 
 gotoNext （true）; 
}，function（）{isScroll = false;}）; 
 $（'＃down'）。hover（function（）{$ b $ isScroll = true; 
 gotoNext（false）; 
}，function（）{isScroll = false;}）; 
}）; 
 
函数gotoNext（dir）{
 if（isScroll）{
 isScroll = true; 
 var step = dir？ ' -  = 20'：'+ = 20'; 
 $（'＃wrapper'）。animate（{
 scrollTop：step 
}，200，linear）; 
 setTimeout（function（）{gotoNext（dir）;}，200）; 
 
 
 $ / code $ / pre 
 $ b 
 HTML： 
 
 
 < div style =height：10px; background：green; width：200px; ID = 向上 >< / DIV> 
< div style =height：200px; overflow：auto; width：200px; ID =包装> 
< 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 = 向下 >< / DIV> 
  
这对我来说很不错
 
I have a fixed height unordered list <ul> with fixed height list items <li>

My ul height is 600px and it contains 200 li items with 40px height.

I need to create a script which scrolls down the list when the mouse hovers the bottom of the list and scrolls up when the mouse hovers the top of the list.

I tried this: http://archive.plugins.jquery.com/project/hoverscroll  but it is not as smooth as it should be, so I need to create a custom one (maybe not using jQuery at all). 

Any ideas or examples? How can I achieve the desired effect?

Thanks
解决方案
Try to use $wrapper.animate({scrollTop: step});
for example 
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>
it is looks pretty good for me

                        
这篇关于将鼠标悬停在固定高度的无序列表上可平滑滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！