2

特定の要素をホバリングして、スクロールバーの矢印のクリックをシミュレートしたい。基本的な例:

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>

私は知っています、それは非常に単純で、さらに悪いことに、しゃっくりがあります...スクロールし続けるには、カーソルを移動する必要があります。連続スムーズスクロールにしたい。

この後、再帰的に回しましたが（フィドル）、スタックオーバーフロー（コンソール）が発生stopPropagationしました。ある時点（数回の再帰の後）またはホバーのトグル（ホバリングしていないときに停止する）を使用する代わりにループを使用する必要がありますか？

他の方法を知っていれば (jQuery-UI を使用せずに、または jQuery をまったく使用せずに)、感謝します!

4

1 に答える 1

2

このホバー動作が必要なすべての要素、特定のクラスを指定します。
マウスがそれらの要素の上にあるかどうかをダーティ チェックします。
必要なペースで、またはホバーがアクティブである限り、対応するクリックを送信/スクロールをアクティブにします。

更新：

ここに作業スニペットがあります。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、特にマウスを離したときの 2 番目のコールバック。
clearTimeout、スクロールをオフにして無限ループを停止するために必要だからです。

于 2015-05-26T14:14:38.497 に答える