マウスを動かすとスクロール

Question

私は開発の新しいインターフェースデザイナーです。私が取り組んでいるサイドプロジェクトで困っています。私は長い、水平に見える視差のシーンを作成したいと思います。ユーザーはマウスホイールを使用してビューを水平方向にスクロールできます。 （私は現在、これを達成するためにこのJQueryプラグインを使用しています：http://www.pixxelfactory.net/jInvertScroll/）

さらに、ユーザーがブラウザウィンドウの左端または右端の20pxギャップにマウスを置くと、彼らがそこにいる限り、その方向に見ることができます。 （参考までに、このインタラクションはLoL、Dota 2、HOTSのような多くのMOBAゲームに基づいており、ユーザーはカーソルを画面の端にかざして地図をパンすることができます）

サンプルスクリプト（下記参照）を見つけましたが、私がしようとしていることを正確に達成していません。この例では、画面が縦に半分に分割され、上または下の部分にホバリングすると、ビューが上下にスクロールします。上記のとおり、ユーザーが画面をスクロールしてスクロールすることができる画面領域の高さを100％高さで20ピクセルだけ必要とします。

私の現在の源：

$(document).mousemove(function(e) { 
$("html, body").scrollTop(function(i, v) { 
     var h = $(window).height(); 
     var y = e.clientY - h/2; 
     return v + y * 0.1; 
    }); 
}); 

任意の提案は素晴らしいだろう！

Answer 1

最初に2つのdivを作成します.1つは左側に、もう一方は右側に作成します。彼らのポーションをCSSに固定して、それらの上にマウスを乗せながらページをスクロールさせます。

これは私のjsのテストコードは次のようになります。ここでは

var offset = 0; 

$(document).ready(function(){ 

    $('.left').bind('mouseenter', function() { 
    var self = $(this); 
    this.iid = setInterval(function() { 
    offset += 300; 
    $('html, body').animate({ 
     scrollTop: offset 
    }, 1); 

    }, 10); 
}).bind('mouseleave', function(){ 
    this.iid && clearInterval(this.iid); 
}); 


$('.right').bind('mouseenter', function() { 
    var self = $(this); 
    this.iid = setInterval(function() { 
    offset -= 300; 
    $('html, body').animate({ 
     scrollTop: offset 
    }, 1); 

    }, 10); 
}).bind('mouseleave', function(){ 
    this.iid && clearInterval(this.iid); 
    }); 
}); 

は完全な例である： https://jsfiddle.net/h596y5rs/1/