ページの下部に固定ナビゲーション バーがありますが、ほとんどの公園ではモバイル サファリで問題なく動作します。ただし、テキスト入力フィールドを追加しました。テキスト入力にフォーカスすると、キーボードが表示され、何らかの理由で固定ナビゲーションがページ上でキーボードの上に移動します。 、それとキーボードの間に約 60px の空白を追加します。さらに、入力フィールドがフォーカスされなくなり、キーボードが消えるまで、要素を相対位置に設定します。
明確にするために、私が解決しようとしている問題は、キーボードの上部に触れて、視野の下部に留まりながら固定ナビゲーションが上に移動することではありません。むしろ、キーボードの上にさらに 50 ピクセルまたは 60 ピクセル移動して、キーボードとキーボードの間に余白が表示され、ページが壊れているように見えます。
長期的に解決しようとしている問題のスクリーンショット。
この質問は、おそらく機能しているソリューションと同様の問題であるように思われるため、jqueryで先に進みました。
ここでの目標は、スクロール機能を無効にし、固定ナビゲーションが押し上げられるのではなく、ページの下部に触れたままにすることで、仮想キーボードが表示されたときに固定ナビゲーションがページの中央まで押し上げられないようにすることです。これは、ユーザーがテキスト入力に集中しているときに、本文のオーバーフローを非表示に変更することによって行われます。
だからここにプログラミングの問題があります：私が書いたjquery（入力フィールドがフォーカスされている間にボディをoverflow:hiddenに設定してスクロールを無効にする）は、Firefoxでは完全に動作しますが、モバイルサファリでは何もしません：
$(document).ready(function(){
$(".mobile_text_focus_fix").focus(function(){
$("body").css("overflow","hidden");});
$(".mobile_text_focus_fix").blur(function(){
$("body").css("overflow","visible");});
});
上記の jquery は、次の html を使用します。
<input type="text" class="mobile_text_focus_fix"></input>
Firefox のスクリーンショット:
前述したように、Firefox で動作しています。上記は私がやろうとしていることの動作例ですが、モバイル サファリでは、上記の jquery はどれも動作していないようです。
これがモバイル サファリでは機能しないのに、Firefox では機能する理由について何か考えはありますか?