jquery - 悬停滚动，点击速度

Question

当您将鼠标悬停在 div 上时，我试图让我的页面滚动。这就是我到目前为止所得到的

$(document).ready(function() {
    $("#hoverscroll").mouseover(function() {
        var div = $('body');
        setInterval(function(){
            var pos = div.scrollTop();
            div.scrollTop(pos + 1);
        }, 100)  
    });
});

http://jsfiddle.net/3yJVF/

但是，还有两件事要做。我需要它在每次点击时提高速度，在不再悬停时停止并将速度重置回默认值。

我正在努力实现这样的目标:

$(document).ready(function() {
    $("#hoverscroll").mouseover(function() {
        var div = $('body');

        setInterval(function(){
            var count = 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 100)  
    });

    $("#hoverscroll").click(function() {
        if (count < 6) {
            count = count+1;
        }
    });

    $("#hoverscroll").mouseleave(function() {
        count = 0; 
    });
});

我搜索并发现一些人在谈论绑定(bind)事件并设置全局变量来检查它是否正在滚动。但上面的功能能用吗？我仍在学习。我可能完全错了。

Answer 1

你已经非常接近了 - 这是我的版本 ( http://jsfiddle.net/Lcsb6/ )

$(document).ready(function() {
    var count;
    var interval;

    $("#hoverscroll").on('mouseover', function() {
        var div = $('body');

        interval = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 100);
    }).click(function() {
        count < 6 && count++;
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        // count = 0;
        clearInterval(interval);
    });
});

需要注意的更改:

• count 在间隔/绑定(bind)之上定义。从您可以在窗口中访问它的意义上来说，它并不完全是“全局”的，但它被降级为位于 onReady 闭包内。
• interval 是 setInterval 的指定值 - 这样我们就可以使用 clearInterval 阻止它稍后执行任何操作
• 我以前没见过 mouseleave，但 mouseout 应该可以。
• 在 jQuery 中，您可以将事物链接在一起 - 因此 $('#hoverscroll').on(...).click(...).on(...).addClass(... ).blah(...) 将节省您每次输入选择器的时间。另外，如果您计划使用链接，请查看 jQuery 的 end() 方法。
• 我更喜欢使用 $.fn.on 而不是像 .click() 这样的简写 - 它清楚地表明您正在使用事件处理程序，请考虑抛出on 的额外几个字符并删除 $() 选择中多余的字符？