悬停滚动，点击速度 [英] Scroll on hover, click for speed

问题描述

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

I am trying to make my page scroll when you hover on a div. This is what I got so far

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

http://jsfiddle.net/3yJVF/

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

However, there are two things left to do. I need it to increase speed each time you click, stop when you're no longer hovering and reset the speed back to default.

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

I'm trying to achieve something like this:

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

我搜索并发现有些人在谈论绑定事件并设置全局变量以检查它是否正在滚动.但是上面的功能会起作用吗?我仍然在学习.我可能完全错了.

I searched and found some people talking about binding event and setting a global variable to check if it's scrolling. But will the above function work? I am still learning. I might be completely wrong.

推荐答案

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

You were pretty close - here's my version (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 定义在间隔/绑定之上.从您可以在窗口中访问它的意义上说，它并不完全全局"，但它被降级为位于 onReady 闭包内.
• interval 是 setInterval 的分配值 - 这样我们就可以用 clearInterval
阻止它以后做任何事情
• 我以前没见过 mouseleave，但 mouseout 应该可以.
• 在 jQuery 中，您可以将事物链接在一起 - 所以 $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) 将节省您每次键入选择器的时间.另外，如果您打算使用链接，请查看 jQuery 的 end() 方法.
• 我更喜欢使用 $.fn.on 而不是像 .click() 这样的简写 - 它清楚地表明您正在使用事件处理程序，请考虑使用on 的额外几个字符并删除 $() 选择中的多余字符?

• count is defined above the interval/bindings. It's not quite "global" in the sense that you can get to it in the window, but it is relegated to living inside the onReady closure.
• interval is the assigned value of setInterval - this way we can stop it from doing anything later with clearInterval
• I haven't seen mouseleave before, but mouseout should do it.
• In jQuery, you can chain things together - so $('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) will save you the time of typing out the selector each time. Also, have a look at jQuery's end() method if you plan on using chaining.
• I prefer to use $.fn.on instead of the shorthands like .click() - it clearly denotes that you are using an event handler, consider throwing in the extra few characters for on and dropping the excess characters in your $() selections?

这篇关于悬停滚动，点击速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！