Edge瀏覽器輸入法鍵盤彈出後頁面滾動問題如何解決？

Edge瀏覽器輸入法鍵盤彈出導致頁面滾動問題的解決方案

許多開發者在使用Edge瀏覽器時，會遇到輸入法鍵盤彈出後頁面高度和滾動異常的問題：當頁面內容充滿屏幕且只有一個輸入框時，鍵盤彈出後頁面高度不變，依然可以上下滾動。本文將提供解決方案。

問題表現：在手機Edge瀏覽器中，簡單的HTML頁面（例如，僅包含一個輸入框和背景色設置）在未彈出鍵盤時，內容充滿屏幕，無法滾動。但鍵盤彈出後，頁面高度未調整，導致出現滾動條，與預期不符。用戶期望鍵盤彈出後頁面高度自適應可視區域，並禁止滾動。

解決方案：關鍵在於使用容器元素包裹輸入框，並調整body元素樣式。創建一個div元素（例如，class名為“container”），將輸入框放入其中。同時，設置body元素的overflow屬性為hidden ，禁止滾動，並設置touch-action: manipulation來阻止觸摸事件下的滾動。

代碼示例：

HTML:

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

CSS:

 body {
  overflow: hidden;
  touch-action: manipulation; /* 或manipulation */
}

通過以上方法，即使容器高度很大，頁面也不會出現滾動條。

進一步優化：為實現頁面高度自適應，可在頁面resize事件中，將頁面高度設置為visualViewport.height 。 然而，即使解決了主要問題，如果輸入框本身允許滾動，拖動輸入框仍可能影響頁面滾動，這需要更深入的探討和解決。

以上是Edge瀏覽器輸入法鍵盤彈出後頁面滾動問題如何解決？的詳細內容。更多資訊請關注PHP中文網其他相關文章！