7

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

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

4

4 回答 4

9

你非常接近 - 这是我的版本（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(...)可以节省您每次输入选择器的时间。end()另外，如果您打算使用链接，请查看 jQuery 的方法。
  • 我更喜欢使用$.fn.on而不是像这样的速记.click()- 它清楚地表明您正在使用事件处理程序，考虑on在您的选择中添加额外的几个字符并删除多余的字符$()？
于 2013-08-12T14:18:44.163 回答
2

您离解决方案并不遥远。您需要将intervalor分配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/

于 2013-08-12T14:19:46.810 回答
0

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

$(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/

于 2013-08-12T14:19:35.390 回答
0

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

看：

$(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

于 2018-05-23T16:43:18.067 回答