feed

2016年01月10日, 編集履歴

固定ヘッダでスクロールが飛んでしまうアレな実装

　最初は通常配置されているヘッダメニュー等が、ページのスクロールにより固定配置に変化するウェブページを最近良く見かける。
　そもそも固定配置させる必要があるのかどうかは別問題として（関連記事：固定配置（position: fixed）を使う前によく考えよう）、ヘッダ要素のスタイルのpositionプロパティをfixedに変えているだけのアレな実装が多いことが問題なのである。このアレな実装のために、positionプロパティ切り替えの前後でスクロールが飛んだように見える（スクロール位置が急に動いたように見える）のだ。

　なぜスクロールが飛ぶのか。
　position: fixedとすると、その要素は他の要素からは存在しないのと同様の扱いになる。最初は通常配置だった要素が固定配置になると、その要素はなくなったものとして後続要素の位置が上に詰められてしまうのだ。固定配置から通常配置へ戻るときも同様である。急に新しい要素が増えて、後続要素の位置は下へズレてしまう。その結果スクロールが飛んだように見えるのだ。

　ひとによるだろうが、私の場合、画面に表示されている文章を上から下まで目線を動かしては読まない。目線は一定の位置である程度固定しておき、その目線の場所へ文章をスクロールさせてきて読む。したがって、スクロール位置が急に飛んでしまうと読んでいた文章を見失ってしまう。読みたかった部分が固定配置の下に隠れてしまうこともよくある。

　スクロールが飛ばないようにするには、単純にpositionプロパティを切り替えているだけではダメだ。たとえば、固定配置に切り替えたあとに同じサイズのダミー要素を挿入するとか、直後の後続要素に同じサイズの上マージンを設定するとかしなければならない。

　ある時期からこのアレな実装をよく見かけるようになったと思う。どこかにアレな実装を広めているヤツがいるのだろうか。