スマホのアドレスバー

COLUMN コラム

スマホのアドレスバー

今月、FE開発で、モーダルのキャンバスに絵を描けるようようなものを開発しました。

「お絵描き中にアドレスバーが非表示→表示され、画面のリサイズが走り、絵が滑らかに書けなくなる事象が発生しました。

・上にスクロールすると、アドレスバーが表示される

・下にスクロールすると、アドレスバーが消える

モーダル表示時に、必ずアドレスバーを固定表示するように特殊な修正しました。

モーダル表示時に、bodyの「position:fixed」にすることで、スクロールバーが消えて、アドレスバーが常に表示される状態となった。

ただ、モーダルスクロール位置が先頭になるので、モーダル表示前にスクロール位置を保持して、モーダル閉じる時に、スクロール位置を設定して対応した。

①スクロールバーの位置を保持

②bodyの「position:fixed」

③モーダル表示処理

①スクロール位置を設定

②bodyのpositionを未設定

③モーダル閉じる

フリーランスのシステムエンジニアしてます。