javascript - 悬停固定高度的无序列表时平滑滚动

Question

我有一个固定高度的无序列表<ul>，其中包含固定高度的列表项<li>

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

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

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

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

谢谢

Answer 1

为什么不把你的屏幕分成一个网格呢？一旦 mouseX 和 mouseY 击中顶部网格，它将以预定义的整数值向上滚动

Answer 2

尝试使用 $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>

对我来说看起来不错