Javascript 平滑滚动，悬停在固定高度的无序列表上

我有一个固定高度无序列表

，其中包含固定高度列表项

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

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

我试过这样做：但它并不像应该的那样平滑，所以我需要创建一个自定义的（可能根本不使用jQuery）

有什么想法或例子吗？我怎样才能达到预期的效果

---

谢谢

为什么不把你的屏幕划分成网格呢？一旦mouseX和mouseY到达顶部网格，它将使用预定义的整数值向上滚动

尝试使用$wrapper.animate（{scrollTop:step}）； 例如 JS:

HTML:

高度：30px；>1
高度：30px；>2
高度：30px；>3
高度：30px；>4
高度：30px；>5
6
7
高度：30px；>8
9
高度：30px；>1
高度：30px；>2
高度：30px；>3
高度：30px；>4
高度：30px；>5
6

---

这对我来说很不错

你说的“划分为网格”是什么意思？我最担心的是滚动是否顺畅。。。这是一个非常广泛的问题，如果我也这么做，我会定义一个div并给它分配一个类，然后我会使用Javascript来检测我的鼠标当前是否碰到了最上面的div，如果是的话，它会向上滚动，如果不是的话，页面会保持原样。（底部相同）

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);
        }
    }

<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>