風柳メモ

ソフトウェア・プログラミング関連の覚書が中心

【覚書】 Twitterのタイムラインなどで、表示位置（スクロール位置）を固定したまま、ポップアップ表示させる方法

css

Twitter 原寸びゅーで、原寸画像をオーバーレイ（ポップアップ）表示させる際、タイムラインのスクロール位置はそのままにするためにはまっていたので、覚え書き。
つくづく、CSS は苦手やわぁ……。

ヘッダ及び表示範囲に相当する要素を、position: fixed を指定することで固定する、ところまではすぐ思いついたのだが、原寸画像が表示範囲よりも大きい場合にどうすればよいのかが当初は思い付かなかった。

苦肉の策として、オーバーレイ表示時には、

  • 表示範囲を、position: absolute で BODY の上端に合わせる
  • タイムラインについては、ネガティブマージンを設定して、見かけ上、オーバーレイ表示したときと同じ位置のものが表示されるようにする

のようにして対処していた（0.1.5.500まで）。

しかし、どうしても無理があったので、パフォーマンスが悪く（反応がにぶく）なってしまった。

その後、

  • 表示範囲は、position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; を指定
  • BODY には、overflow-y: hidden; を指定

のようにしておけば、原寸画像を表示している範囲だけをスクロールさせることが出来ることに気付き、対応。

パフォーマンスについても改善されたように思われる。

なお、このようにした場合、表示範囲の操作（スクロール）に関しては（ブラウザでBODY(HTML)の標準的なキー操作として用意されている）[Space][Home][End]等のキーによる移動は効かなくなるので、自前で用意する必要があった。