如何使滚动与单击滚动条箭头一样真实？

Question

我想通过悬停某些元素来模拟滚动条箭头的点击。 基本例如：

function scrollBody(dir, speed){ 
 
    $('html, body').animate(
 
     {'scrollTop': dir+'='+speed+'px'}, 
 
     {duration: 300, easing: 'easeOutQuad'} 
 
    ); 
 
}; 
 
$('#top').hover(function(){scrollBody('-', '50')}); 
 
$('#bottom').hover(function(){scrollBody('+', '50')}); 
 
$('#top-fast').hover(function(){scrollBody('-', '150')}); 
 
$('#bottom-fast').hover(function(){scrollBody('+', '150')});

#content{width: 300px} 
 
.scroller{ 
 
    position: fixed; 
 
    background-color: grey; 
 
    color: white; 
 
    right:0; 
 
    padding: 5px; 
 
    width: 35px; 
 
} 
 
.scroller:hover{background-color:green} 
 
#top{top:35px} 
 
#bottom{bottom:35px} 
 
#top-fast{top:0} 
 
#bottom-fast{bottom:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
<div id="content"> 
 
    Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 
 
</div> 
 
<div id="top" class="scroller"> 
 
    2Top 
 
</div> 
 
<div id="bottom" class="scroller"> 
 
    2Bot 
 
</div> 
 
<div id="top-fast" class="scroller"> 
 
    2T++ 
 
</div> 
 
<div id="bottom-fast" class="scroller"> 
 
    2B++ 
 
</div>

我知道，这是很简单，更糟的是，它有打嗝......你需要移动光标，以保持它的滚动。 我想把它变成一个连续的平滑滚动。

这个我simply turned it recursively (fiddle)后，但我得到了堆栈溢出（控制台），我应该用stopPropagation在某一点（几个递归之后）或而不是使用悬停的切换回路（不徘徊时停止）或别的东西， ？

如果你知道其他方法（没有jQuery-UI来平滑它，甚至没有jQuery），我将不胜感激！

Answer 1

给出你想要的这个悬停行为的所有元素，某个类。
脏检查鼠标是否在这些元素之上。
发送相应的点击/激活滚动，以所需的速度或只要悬停处于活动状态。

更新：

这里是一个工作片段。除了JS之外，小提琴没有任何变化。 由于超时而停止滚动有一点延迟。 相关的文档：

var actions; 

function scroll(dir, speed){ 
     $('html, body').animate(
     {'scrollTop': dir+'='+speed+'px'}, 
     {duration: 300, easing: 'easeOutQuad'} 
     ); 
}; 

function startScroll(dir, speed){ 
    actions = setTimeout(function(){ 
     scroll(dir, speed); 
     startScroll(dir, speed); 
    }, 300); 

}; 

function endScroll(){ 
    clearTimeout(actions);  
} 
$('#top').hover(function(){startScroll('-', '50')}, endScroll); 
$('#bottom').hover(function(){startScroll('+', '50')}, endScroll); 
$('#top-fast').hover(function(){startScroll('-', '150')}, endScroll); 
$('#bottom-fast').hover(function(){startScroll('+', '150')}, endScroll); 

hover，特别是在鼠标离开第二个回调。
clearTimeout，因为我们需要它来关闭滚动并停止无限循环。