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

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

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定义在区间/绑定之上。从某种意义上来说，它不是那么“全球化”，你可以在窗口中看到它，但它会降级为生活在onReady闭包内。
interval是setInterval的指定值 - 这样我们就可以阻止它稍后使用clearInterval
我之前没有见过mouseleave，但mouseout应该这样做。
在jQuery中，您可以将事物链接在一起 - 因此$('#hoverscroll').on(...).click(...).on(...).addClass(...).blah(...)每次都可以节省您输入选择器的时间。另外，如果您打算使用链接，请查看jQuery的end()方法。
我更喜欢使用$.fn.on而不是像.click()这样的缩写 - 它清楚地表示您正在使用事件处理程序，考虑为on投入额外的几个字符并删除$()选项中多余的字符？

Answer 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/

Answer 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/

Answer 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

滚动鼠标悬停，点击查看速度

4 个答案: