悬停滚动，点击速度答案

【问题标题】：Scroll on hover, click for speed悬停滚动，点击速度
【发布时间】：2013-08-13 21:07:43
【问题描述】：

当您将鼠标悬停在 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; 
    });
});

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

【问题讨论】：

标签： jquery events scroll click hover

【解决方案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 在间隔/绑定之上定义。从某种意义上说，它不是“全局”的，您可以在窗口中找到它，但它被归入 onReady 闭包内。
interval 是 setInterval 的赋值 - 这样我们就可以阻止它以后用 clearInterval 做任何事情
我之前没见过mouseleave，但mouseout应该会。
在 jQuery 中，您可以将事物链接在一起 - 因此$('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...) 将节省您每次输入选择器的时间。另外，如果您打算使用链接，请查看 jQuery 的 end() 方法。
我更喜欢使用 $.fn.on 而不是像 .click() 这样的简写 - 它清楚地表明您正在使用事件处理程序，请考虑为 on 添加额外的几个字符，并在您的 @987654334 中删除多余的字符@选择？

【讨论】：

两种解决方案都有效。由于我是新手，我不能说哪个更有效。但是感谢您花时间解释代码！
这种情况下的效率可以忽略不计 - 话虽如此，您应该仔细研究所有可行的解决方案并了解它们的工作原理，并在需要时适当地应用显示的技术。

【解决方案2】：

您离解决方案并不遥远。您需要将 interval 或 timeout 分配给变量并在将鼠标悬停在元素上时将其清除：

$(function () {
    var speed = 1,
        timer;
    $("#hoverscroll").hover(function () {
        var div = $('body');
        (function startscrolling(){
            timer = setTimeout(function () {
                var pos = div.scrollTop();
                div.scrollTop(pos + speed);
                startscrolling();
            }, 100);
        })();
    },

    function () {
        clearTimeout(timer);
        speed = 1;
    })
    .click(function(){
         if (speed < 6) speed++;
    });

});

http://jsfiddle.net/3yJVF/2/

【讨论】：

【解决方案3】：

尝试对您的小提琴代码进行以下操作：

$(document).ready(function() {
     $("#hoverscroll").mouseover(function() {
       var div = $('body');
      setInterval(function(){
       var pos = $("#hoverscroll").postion().top;       
         window.scrollTo(0, pos + 1)
     },500);

 });
});

看到这个小提琴：http://jsfiddle.net/3yJVF/5/

【讨论】：

【解决方案4】：

我更新了已接受问题的代码，因为它不再起作用了。

见：

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

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

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

http://jsfiddle.net/wzvowvzn

【讨论】：