固定ヘッダを使うとスペースキーでのスクロール量が合わなくなる

position:fixed
などでヘッダやフッタを画面上に固定しているサイトは少なくありません。facebookとかtwitterとかそうですね。

固定UI自体は便利なのですが、まず、PCブラウザにはスペースキーで1画面分スクロールできる機能がほぼ例外なくあります。そして、スクロール量は表示領域全体の高さなのですが、固定UIで隠れている領域は考慮されないので、本文を隠すような固定UIがあると、見た目上はスクロールしすぎてしまうのです。

BLOGOSの例を見てみましょう。

ハイライトした部分の本文が、固定フッタの下に隠れている。

スペースキーで1画面分スクロールさせると、隠れていた部分が画面外までスクロールしてしまい、見えなくなってしまった。

facebookやtwitterはポインタで操作するUI（いいねボタンやRT）が多いので、マウスやトラックパッドでスクロールさせることが多く、スペースキーでのスクロールはあまり行わないので気になりません。しかしニュースメディアやブログの場合はポインタを操作する必要がないため、スペースキーでスクロールさせることが少なくありません。BLOGOSの場合は後者なので、不便だなあ、と思うことがよくあります。

固定UIの使い所は慎重にすべきですね。

追記

• @kana1氏より、特定条件で固定ヘッダぶんを考慮してスクロール量を調整できることがあるそうです。twitterを見た限り、Chromeではちゃんと調整されていました。また、Firefoxでは調整されませんでした。