上下キーを押すと、ページスクロールしてしまうのです

Question

■前提
・JavaScriptで「上下左右キー」を利用してある動作をしています
・普通のページだと「上下左右キー」が問題なく使えます

■困っていること
・ところが、縦長のページの時だけ、「上下キー」を押すと、ページスクロールしてしまい、思ったような動作ができません
・左右キーは、使えます

■質問
・JavaScriptのところにマウスをおくと、「上下キー」はそのJavaScriptに対して有効になるようにするにはどうすれば良いでしょうか？
・もしくは、「ページスクロール」しなくて良いので、「上下キー」は常にそのJavaScriptに対して有効になるようにするにはどうすれば良いでしょうか？

fujillin · Accepted Answer

こんにちは。

＞縦長のページの時だけ、「上下キー」を押すと、ページスクロールしてしまい、
＞思ったような動作ができません
通常のブラウザの仕様ですので、それを変えない方がユーザにとってはわかり易い操作になりませんか？

＞JavaScriptのところにマウスをおくと、「上下キー」はそのJavaScriptに対して
＞有効になるようにするにはどうすれば良いでしょうか？
「JavaScriptのところにマウスをおくと」が、どのような操作を意味しているのか不明ですが、ブラウザのあるエリアにマウスがある時にキーによるスクロールを無効にすることは不可能ではありません。
そのような条件が揃った時に、スクリプトから　event.returnValue = false（IE）、event.preventDefault()（Fx他）を実行することでキーイベントをキャンセルすることが可能です。

＞「上下キー」は常にそのJavaScriptに対して有効になるように
＞するにはどうすれば良いでしょうか？
上下キーがスクリプトを無効にしてはいないはずです。スクリプトを実行した上で、本来の処理もされているだけではないでしょうか？
スクリプトの内容が、スクロールを制御するような内容の場合は、機能の内容が矛盾するために処理されていないように見えることはあるかも知れません。

そもそも、ローカルルールで設定するキーの機能を、わざわざデフォルトの機能に被せて設定することに疑問を感じます。
テンキーの8、2など他のキーに割り当てるとか、ブラウザ上に操作用の方向キーを表示してそれをマウスで操作するとかの発想転換はありえないのでしょうか。（操作の目的が不明なので、なんともわかりかねますが）

ORUKA1951 · Answer

[実行ボタン]などで、フォーカスをその要素に当たるようにする。
　他の部分をクリックすると、ページがスクロールできるようにしておかなければなりません。

35fa8e3c · Answer

項目を分けた美しい文章形式ですが、動作環境や作品の詳細を書くとなおよいでしょう。
勝手に私が好きなＩＥで話を進めます。私が作ったことがある上下左右でキャラを動かすスマブラみたいな作品で話を進めます。

「■質問」の二番目への答えになると思いますが、
「あふれ出た部分(overflow)を隠しちゃう(hidden)」というスタイルシートによって、スクロール機能を抹殺することができます。
ページ全体に対して行うならば、
---
<body style="overflow:hidden;">
---
で解決するでしょう。
スクロールバーを残したいのであれば、心当たりがありますがテストが面倒なのでまずはこの辺で。

上下キーを押すと、ページスクロールしてしまうのです

こんにちは。

[実行ボタン]などで、フォーカスをその要素に当たるようにする。

項目を分けた美しい文章形式ですが、動作環境や作品の詳細を書くとなおよいでしょう。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング