ワイズリマインダー

ページ下部にバーをつけた時にiOSで計算がズレる

スクロールしても常にページ下部にバーを表示するようにして、
そこにあるハンバーガーメニューをクリックするとサイドメニューが飛び出す仕組みを作りました。
そのサイドメニューにスクロールが発生した時、iOSだけ下部の計算がズレる現象が発生しました。
（サイドメニューの最後が隠れる）

これは、ページをスクロールした時に見え隠れするアクションバー？ステータスバー？によるものらしい。

参考サイト
iOS Safariのアクションバー表示エリアはタップイベントをブロックする – Orime
ページ下部にトップに戻るボタンとか設置する時に気をつけるべきこと。iOSでセーフエリア、Safariで下部のステータスバー – 青いやつの進捗日記。

参考にしたサイトではこの憎き44pxを計算するみたいですが、
作成したサイトはvhを使用していました。
（ページ下部のバーをheight:15vwで作成して、サイドメニューをheight:85vh）

色々試しましたがシンプルにvhを使用するのをやめて%を使う事で解決。

#side_menu{
  /* height:100vh; */
  height:100%;
}
#side_menu > div.wrap{
  /* height:calc(100vh - 15vw); */
  height:calc(100% - 15vw);
}

• ≪新しい記事へ
• 古い記事へ≫

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。