滚动鼠标hover，点击查看速度

当你将鼠标hover在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/

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

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

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

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

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

Answer 2

你距离解决方案还有一段距离。 您需要为变量分配interval或timeout ，并在hover元素时将其清除：

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