上下キーでスクロールバーが動いてしまう
問題
"ul""li"のリストにスクロールバーをつけ、上下Keyでリスト項目の移動をしようとしたが、bodyスクロールバーが動いてしまう問題の調査。
原因
"body"全体でKey検知を行っていたため。
はじめ、上下Keyのスクロールバーが動いてしまうのは、ブラウザのデフォルト機能のため、それを抑止するために、
event.preventDefault()
をしかければいいかと考えたが、これをやってしまうと、"ul"のスクロールもできなくなってしまう。
そのため、event.preventDefault()案は却下。
対策①
・ keyイベントの検知を""ul""にフォーカスがあたった時だけにする
"ul"をフォーカス対象をにする(tabindexを付加する)
"ul"にkeypressイベントをひもづける
・ "li"にtabindexをいれ、上下Key検知でsetFocus()をCall。"ul"内スクロール位置を調整。
対策①結果
"ul"内位置調整はできたが、TabKey押下時に"li"すべてにフォーカスがあたってしまう。
対策②
・ 対策①と同じで、tabindexは削除
・"ul"内スクロール位置を自動調整する。※2018/01/20ではうまくいかない。
See the Pen 上下キーとスクロールバー by satsuki mori (@satsuki) on CodePen.
ブラウザのデフォルト機能の抑止
上下Keyでスクロールバーが動いてしまうのは、ブラウザのデフォルトの機能。
そこで、
- event.preventDefault();
- return false
をひもづけてみた。
event.preventDefault()で、スクロールバーは動かなくなった。
return false;はうごいてしまう。return false;は以降のバブリング処理を無効かするもので、ブラウザのデフォルトの機能を無効かするものではない。
参考サイト
iwb.jp
参考プログラム
See the Pen 上下キーとスクロールバー by satsuki mori (@satsuki) on CodePen.
フォーカスとkeypressイベント
document.keypressでイベントを紐づけた場合、対象要素にフォーカスが当たった状態でkeyを押下しないとイベントは発生しない。
タグはフォーカスがあたらないため、あらかじめ
をつけることで、フォーカス対象とすること。
フォーカスとスクロールバーについて
スクロールバーは、"ul"をフォーカスをあてた状態で上下Keyを押下すると、"ul"のスクロールバーのみが動き、外側のスクロールバーには影響しない。しかし、"ul"のフォーカスが最後まで行ってしまうと、"body"のスクロールバーが動き出す。
