jquery - スクロール (マウスが境界線に触れたときの左/右) の動作は Windows 8 のようですが、jQuery を使用します

Question

Windows 8 のスタート ページで「スクロール」できる方法が気に入っています。画面の左または右の境界線に触れるだけで、ディスプレイが移動します。私の言いたいことがわかりますか？

この動作を jQuery で再現する方法はありますか?

そのため、マウス カーソルをページの右端に移動すると、ページは自動的に右にスクロールします。

ありがとう。

Answer 1

編集：概念実証：

jsBin デモ

できますよ：

• 要素の幅を知る必要があります
• それに隠されたオーバーフローを適用する
• mousemove要素の内側を追跡するoffset
• マウスが「ホット スポット」内にある場合は、scrollLeft 方向 アニメーションを使用します-=15 +=15
• のようにアニメーション化します (関数名のコールバックは.stop().animate({scrollLeft: direction },200, 'linear', loop);どこにありますか)loop

jQuery:

var direction = '';
function loop(){
  $('#movable').stop().animate({scrollLeft: direction },200,'linear',loop);
}

var movableW = $('#movable').width();
  
$('#movable').on('mousemove',function( e ){

  var ofs = $(this).offset();
  var pos = {X: e.pageX-ofs.left};
  
  if( pos.X < 20){
     direction = '-=20';
     loop();
  }else if(pos.X > movableW-20){
     direction = '+=20';
     loop();
  }else{
     $(this).stop();
  }

}).on('mouseleave', function(){
  $(this).stop(); 
});