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

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

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

更新：

这是一个有效的 sn-p。除了 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，因为我们需要它来关闭滚动并停止无限循环。