如何使滾動與單擊滾動條箭頭一樣真實？

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，因爲我們需要它來關閉滾動並停止無限循環。