Question

我想模拟滚动条箭头＆＃39;通过悬停某些元素进行点击。基本示例：

＆＃13;

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')});

＆＃13;

#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}

＆＃13;

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

＆＃13;

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

在此之后我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，因为我们需要它来关闭滚动并停止无限循环。

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

1 个答案: