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

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

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

更新：

这是一个工作片段。 fiddle 除了 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，因为我们需要它来关闭滚动并停止无限循环。

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

How to make a scroll as real as clicking the scroll bar arrows?

html

javascript

jquery

scroll

onhover