3

トピックとアイテムでメニューを作成しています。各トピックは、クリックして展開したり折りたたんだりできます。私の仕事は、上下の矢印キーでメニュー トピックと項目を移動できるようにすることです。私はすでにこれを行っていますが、問題は、ページがウィンドウよりも大きい場合、矢印キーを押すとページがスクロールすることです。私は使用してみました：

document.body.style.overflow = "hidden";

ページのスクロールを停止します。したがって、たとえば「Topic2」をクリックすると、引き続き矢印キーを使用して次のトピック/項目に移動できます。その後、画面の他の場所をクリックすると、オーバーフローを自動に戻し、ページを再びスクロールできます。

これは IE では機能しますが、FF では機能しません。FF では、スクロールバーが削除され、マウスホイールはページをスクロールしませんが、矢印キーは引き続きスクロールします。だから私の質問は、それを修正する方法、またはメニュー要素にフォーカスがあるときにページをスクロールしない方法です。したがって、overflow プロパティは使用しません。

4

3 に答える 3

12

keydown イベントをドキュメントにバインドする必要があり、イベントのキーコードが矢印キー (37 ～ 40) のいずれかに一致する場合は、false を返します。そうすれば、矢印を押してもそれ以上進みません。

document.onkeydown = function(e) {
    var k = e.keyCode;
    if(k >= 37 && k <= 40) {
        return false;
    }
}

メニューがアクティブなときにのみ機能するように簡単に拡張できますが、そのコードの一部を確認せずに例を挙げることはできません。

于 2010-01-07T13:06:18.717 に答える
3

以下のコードは問題を修正しました

$(window).scroll(function () { 
  window.scrollTo(0,0);
});
于 2012-08-23T09:45:23.770 に答える
0

私が見ることができる唯一の方法は、keydownイベントを傍受し、自分でぼかし/焦点を合わせることです.

これらのキーをキャッチすることにはいくつかの落とし穴があるようです。非常に有望に見える多くの (JQuery ベースの) 例については、この質問を参照してください。

于 2010-01-07T13:07:28.183 に答える