web-dev-qa-db-ja.com

マウスではなく矢印キーでスクロールできないようにするにはどうすればよいですか?

私はjQueryを使用しているため、それを介したソリューションも機能します。理想的には、両方を知りたいのですが。

(jQueryを使用して)ページの別の関数に矢印キーが既にバインドされていますが、矢印キーを使用すると、それに加えてページがスクロールされ、問題が発生します。

一度は知っていたかもしれませんが、今は覚えていません。

34
Daddy Warbox

ドキュメントレベルのキープレスハンドラーを追加することでうまくいきます。

var ar=new Array(33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
     var key = e.which;
      //console.log(key);
      //if(key==35 || key == 36 || key == 37 || key == 39)
      if($.inArray(key,ar) > -1) {
          e.preventDefault();
          return false;
      }
      return true;
});
79
TheVillageIdiot

いくつかの状況下で、例えば。あなたが実際に焦点を当てている要素を持っていないとき、あなたがクリックしなければならなかったいくつかの領域だけ、あなたはハンドラーをあまり制御できず、グローバルレベルでイベントを防ぐことはせいぜい少し不安定かもしれません(私が見つけたように)難しい方法です)。

これらの場合の最も簡単な解決策は、コントロールボタンのクリックでもバインドし、左に-9000pxの位置にある空の入力要素に焦点を当てることです。

その後、キーダウンを介してイベントを確実にブロックできます。また、入力要素のデフォルトの動作はカーソルを左右に移動するだけなので、デフォルトの動作や他のグローバルリスナーのブロックについて心配する必要はありません。

2
srcspider

ドキュメントレベルのキープレスハンドラーを追加すると、要素にフォーカスがあるときだけでなく、ページの通常のスクロールがいつでも妨げられます。これは望ましくない結果になる可能性があります。

1
JVitela