キーボードがエッジブラウザー入力メソッドでポップアップした後にページスクロールの問題を解決する方法は？

キーボードがエッジブラウザー入力メソッドでポップアップするときのページスクロールの問題の解決策

エッジブラウザを使用すると、多くの開発者は、キーボードがポップアップした後にページの高さやスクロールなどの問題に遭遇します。ページコンテンツが画面に入力され、入力ボックスが1つしかない場合、キーボードがポップアップしてもページの高さが変更されず、スクロールしてスクロールできます。この記事はソリューションを提供します。

問題の顕現：携帯電話のエッジブラウザでは、キーボードがポップアップせず、コンテンツが画面でいっぱいでスクロールできないときに、単純なHTMLページ（入力ボックスと背景色設定のみを含む）が画面を埋めます。ただし、キーボードがポップアップした後、ページの高さが調整されていないため、予想と矛盾するスクロールバーになります。ユーザーは、キーボードがポップアップしてスクロールを禁止した後、ページが視覚領域に高度に適応できることを期待しています。

解決策：重要なのは、コンテナ要素を使用して入力ボックスをラップし、ボディ要素スタイルを調整することです。 Div要素を作成し（たとえば、クラスには「コンテナ」という名前が付けられています）、入力ボックスを入れます。同時に、身体要素のoverflowプロパティをhidden 、スクロールを禁止し、 touch-action: manipulation設定します。

コード例：

HTML：

<div class="container">
  <input type="text">
</div>

CSS：

体 {
  オーバーフロー：隠し;
  タッチアクション：操作; / *または操作 */
}

上記の方法では、コンテナの高さが大きい場合でも、ページにはスクロールバーがありません。

さらなる最適化：ページの高さの適応を実現するために、ページの高さをPageのresizeイベントでvisualViewport.heightに設定できます。ただし、主な問題が解決したとしても、入力ボックスをドラッグすると、入力ボックス自体がスクロールを許可する場合、ページスクロールに影響を与える可能性があります。

以上がキーボードがエッジブラウザー入力メソッドでポップアップした後にページスクロールの問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。