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。 然而，即使解決了主要問題，如果輸入框本身允許滾動，拖動輸入框仍可能影響頁面滾動，這需要更深入的探討和解決。