Question

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

我的ul高度为600px，包含200升高度为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>

对我来说看起来很不错

在悬停具有固定高度的无序列表时平滑滚动

2 个答案: